jsは画像をクライアントコンピュータに自動的にダウンロードすることを実現する
1565 ワード
1つ目:
最も便利で速い方法はHTML 5のオリジナルのdownload属性を使って、この属性はファイルなどをダウンロードすることもできます.たとえば
しかし,HTML属性を純粋に利用してダウンロードを実現すれば,動的コンテンツにはどうしようもないことは明らかである.
ユーザーがクリックすることなく画像をクライアントに自動的にダウンロードできるようにするには、以下の方法を参考にしてください.
2つ目はbase 64による画像のダウンロードです
画像をダウンロードしたい場合は、base 64フォーマットに変換してダウンロードできます.
しかし、この方法にはいくつかの問題があります. Googleブラウザはクライアントコンピュータ上の任意の場所にダウンロードできません 360ブラウザからダウンロードプロンプトボックス がポップアップ IE 11ブラウザからページを飛び出し、直接画像を開き、 をダウンロードできません.
最も便利で速い方法は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");
しかし、この方法にはいくつかの問題があります.