JS-点击图片下载到本地

最新推荐文章于 2024-06-03 14:11:50 发布

半笙彷徨

最新推荐文章于 2024-06-03 14:11:50 发布

阅读量2.5k

点赞数 1

分类专栏： JS 文章标签： JS 点击图片下载到本地

本文链接：https://blog.csdn.net/wang704987562/article/details/85227715

版权

JS 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

先使用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

半笙彷徨

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JS-点击图片下载到本地

先使用canvas显示图片，接着使用toDataURL()方法获取图片展示的 data URI，通过在a链接设置download属于，点击将图片内容下载到本地。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &
复制链接

扫一扫