我想创建图像的缩略图，图像和缩略图都将存储在一个文件夹中

Question

我需要上传的图像使用<input type="file">，我也希望，当我点击上传按钮，它创建了它的缩略图和“图像”和“缩略图”将被保存，我需要帮助。

这是我的代码。在这里，我已经减小了图像的大小，但我无法自动下载该文件。

​

var resizeImage = function(src,width,height) {
	var orig_src = new Image(),
	resize_canvas = document.createElement('canvas');
	orig_src.src = src;
	resize_canvas.width = width;
	resize_canvas.height = height;
	resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height);
	$(".resize-image").attr('src', resize_canvas.toDataURL("image/png"));
}
$(function(){
	resizeImage('thumb-1920-358764.jpg',100,100); // Image path, width, height
	
});

​

​

<img class="resize-image" src="thumb-1920-358764.jpg" />`

​

​

<img class="resize-image" src="thumb-1920-358764.jpg" />`

​

Answer 1

您可以将<img>元素的crossOrigin属性设置为"anonymous"，创建一个FormData()对象以将图像存储为File对象，并使用canvas.toBlob()替换.toDataURL()，在动态创建的原始图像的<img>事件中，首先在第二个D10元素处调用D9，然后使用D19或D20将结果D12设置为FormData实例，然后对原始D15元素调用D14，然后重复调用D16以将两个D17设置为D18，可以使用D19或D20将其发布到服务器

​

var resizeImage = function(src, width, height, fd, input) {
  var orig_src = new Image(),
    resize_canvas = document.createElement('canvas');
  orig_src.crossOrigin = "anonymous";
  orig_src.src = src;
  orig_src.onload = function() {
    resize_canvas.width = width;
    resize_canvas.height = height;
    resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height);
    var imageCanvas = document.createElement("canvas");
    imageCanvas.getContext("2d").drawImage($(".resize-image")[0], 0, 0);
    imageCanvas.toBlob(function(blob) {
      imageBlob = blob;
      fd.append("originalImage", blob);
    });

    resize_canvas.toBlob(function(blob) {
      canvasBlob = blob;
      fd.append("resizedImage", blob);
      $(".resize-image")
        .attr('src', URL.createObjectURL(blob));
      input.removeAttr("disabled");
    });
  }
}
$(function() {
  var canvasBlob, imageBlob, fd = new FormData(),
    input = $("input[type=button]");
  resizeImage("https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png", 100, 100, fd, input); // Image path, width, height
  input.on("click", function() {
    for (let [key, prop] of fd) {
      console.log(key, prop)
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="resize-image" src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png" crossOrigin="anonymous" />
<input type="button" value="upload" disabled>

​