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

【问题标题】：Resize image with javascript and save to disk使用 javascript 调整图像大小并保存到磁盘
【发布时间】：2017-04-22 05:27:40
【问题描述】：

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

【问题讨论】：

如果你使用croppie，那么在调整大小时它会被转换为base64图像字符串。然后将此字符串发布到服务器，通过 php 使用 base64_decode($base64string) 和 file_put_contents($file_path, $base64stringdecoded); 将文件保存在所需的路径
@Deep3015 您的链接很有帮助。实际上我现在无法更改我的完整网站代码。所以我试图修改调整大小图像的文件输入。我改变了我的问题。也许你能再次帮助我。
我认为没有办法。要求用户重新上传图片或更改代码。

标签： javascript php jquery

【解决方案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;

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

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

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

【讨论】：