jsは画像をクライアントコンピュータに自動的にダウンロードすることを実現する

1565 ワード

1つ目:
最も便利で速い方法はHTML 5のオリジナルのdownload属性を使って、この属性はファイルなどをダウンロードすることもできます.たとえば
adownload

しかし,HTML属性を純粋に利用してダウンロードを実現すれば,動的コンテンツにはどうしようもないことは明らかである.
ユーザーがクリックすることなく画像をクライアントに自動的にダウンロードできるようにするには、以下の方法を参考にしてください.
2つ目はbase 64による画像のダウンロードです
画像をダウンロードしたい場合は、base 64フォーマットに変換してダウンロードできます.
 var downloadIamge = function(imgsrc, name) { //          
        let image = new Image();
        //      Canvas     
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function() {
            let canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            let context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            let url = canvas.toDataURL("image/png"); //     base64    
            let a = document.createElement("a"); //     a  
            let event = new MouseEvent("click"); //         
            a.download = name || "photo"; //       
            a.href = url; //     URL   a.href  
            a.dispatchEvent(event); //   a     
        };
        image.src = imgsrc;
    }
    downloadIamge("1.jpg", "3.jpg");

しかし、この方法にはいくつかの問題があります.
  • Googleブラウザはクライアントコンピュータ上の任意の場所にダウンロードできません
  • 360ブラウザからダウンロードプロンプトボックス
  • がポップアップ
  • IE 11ブラウザからページを飛び出し、直接画像を開き、
  • をダウンロードできません.