JS-点击图片下载到本地

小鱼儿 2022-04-10 02:16 396阅读 0赞

先使用canvas显示图片，接着使用toDataURL()方法获取图片展示的 data URI，通过在a链接设置download属于，点击将图片内容下载到本地。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    	</head>
    	<body>
    		<button onclick="download()">点击下载</button>
    	</body>
    	<script>
    		function download() {
    			var image = new Image();
    			image.crossOrigin = "anonymous";
    			image.src = "http://is3.mzstatic.com/image/thumb/Music62/v4/4b/f6/a2/4bf6a267-5a59-be4f-6947-d803849c6a7d/source/200x200bb.jpg";
    			var fileName = image.src.split(/(\\|\/)/g).pop();
    			image.onload = function () {
    			    var canvas = document.createElement('canvas');
    			    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
    			    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
    			    canvas.getContext('2d').drawImage(this, 0, 0);
    			    var blob;
    			    // ... get as Data URI
    			    if (image.src.indexOf(".jpg") > -1) {
    			    blob = canvas.toDataURL("image/jpeg");
    			    } else if (image.src.indexOf(".png") > -1) {
    			    blob = canvas.toDataURL("image/png");
    			    } else if (image.src.indexOf(".gif") > -1) {
    			    blob = canvas.toDataURL("image/gif");
    			    } else {
    			    blob = canvas.toDataURL("image/png");
    			    }
    			    $("body").html("<b>点击下载图片.</b><br><a download='" + fileName + "' href='" + blob + "'><img src='" + blob + "'/></a>");
    			};
    		}
    	</script>
    </html>

> [https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL][https_developer.mozilla.org_zh-CN_docs_Web_API_HTMLCanvasElement_toDataURL]

[https_developer.mozilla.org_zh-CN_docs_Web_API_HTMLCanvasElement_toDataURL]: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL