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

Question

我试图将由 JavaScript 完成的调整大小的图像上传到服务器。
所以我尝试使用调整大小的图像设置文件输入。
后来我才知道we cannot change file input unless user select file
现在我试图要求用户将调整大小的图像保存到本地磁盘，以便他可以重新附加文件。
我的问题是:如何将JavaScript完成的调整大小的图像保存到本地磁盘。

Answer 1

最后我自己解决了这个问题，并在这里添加我的解决方案以供 future 的读者使用。

$(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; 

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

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

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