JavaScriptを使用して画像サイズを変更してディスクに保存する

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'); 
    } 
}); 

この2行は、ファイル

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

残念ながら、それは保存するためには良いのファイル名を使用しないで保存します。だから私はそれらの2つの行を置き換える代わりの方法を使用しました。

FileSaver.jsをhereからダウンロードし、それをあなたのスクリプトに含めます。 それがBASE64画像列に変換され、サイズ変更に続いて[croppie（https://foliotek.github.io/Croppie/）を使用している場合今では、これらのコード

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