原生js下载绝对路径的图片

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

web_cgh

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

阅读量2.5k

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/web_cgh/article/details/80549412

版权

Javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>原生js下载绝对路径的图片</title>
</head>
<body>
<img src="http://7xiba5.com2.z0.glb.clouddn.com/07202017-1601-0000-0030-000000000098/20180117225412/file/image/M_20180117225408_0000_T.jpg" class="img1"/>




<input type="button" value="download_image" οnclick="downloadIamge('.img1','chenguihai.jpg')"/>
<script type="application/javascript">
function downloadIamge(selector, name) {
var image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous');
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');

context.drawImage(image, 0, 0, image.width, image.height);

//本项目只兼容到ie11和其他主流浏览器，ie10正在找办法解决，如果你好的办法，可以推荐给我学习一下。

if(isIE()){
saveFileForIE(canvas, name);
}{

var url = canvas.toDataURL('image/png');

// 生成一个a元素
var a = document.createElement('a');
// 创建一个单击事件
var event = new MouseEvent('click');
a.download = name || new Date().getTime();
// 将生成的URL设置为a.href属性
a.href = url;

// 触发a的单击事件

a.dispatchEvent(event)

}

};
image.src = document.querySelector(selector).src

}

</script>
</body>
</html>

web_cgh

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生js下载绝对路径的图片

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &lt;tit
复制链接

扫一扫

专栏目录