Question

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

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;

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

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

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

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

1 个答案: