使用javascript调整图像大小并保存到磁盘

我试图将JavaScript完成的已resize的图像上传到服务器。
所以我尝试用resize的图像设置文件输入。
之后我才知道除非用户选择文件否则我们无法更改文件输入
现在我试图要求用户将已resize的图像保存到他的本地磁盘，以便他可以重新附加该文件。
我的问题是：如何将JavaScript完成的已resize的图像保存到本地磁盘。

Answer 1

最后我自己解决了，我在这里为未来的读者添加我的解决方案。

 $(document).on("change", ":file", function(event) { if(this.files && this.files[0]) { var file_input=$(this); var file=this.files[0]; var file_type=file.type; if(file_type && file_type.substr(0,5)=="image") { var img = document.createElement("img"); var reader = new FileReader(); reader.onload = function (e) { img.src = e.target.result; img.onload = function (imageEvent) { var MAX_WIDTH = 800; var MAX_HEIGHT = 600; var width = img.naturalWidth; var height = img.naturalHeight; //resize the image if it higher than MAX_WIDTH or MAX_HEIGHT if((width>MAX_WIDTH)||(height>MAX_HEIGHT)) { if((width/height)>(MAX_WIDTH/MAX_HEIGHT)) { height *= MAX_WIDTH / width; width = MAX_WIDTH; } else { width *= MAX_HEIGHT / height; height = MAX_HEIGHT; } var canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height); //following two lines saves the image var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); window.location.href=image; // //file_input.val(null);//if you want reset file input //file_input.trigger('click'); //if you want to reopen file input } }; }; reader.readAsDataURL(file); } } else { console.log('no file attached'); } }); 

这两行保存文件

 var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); window.location.href=image; 

不幸的是，它没有使用好的文件名来保存。 所以我用另一种方法来替换这两行。

从此处下载FileSaver.js并将其包含在您的脚本中。 现在，您可以使用这些代码替换这两行

 canvas.toBlob(function(blob) { saveAs(blob, 'image.png'); //saveAs(blob, file.name);//or this one });