<!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"/>
<!--// 调用方式-->
<!--// 参数一: 选择器,代表img标签-->
<!--// 参数二: 图片名称,可选-->
<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');
// 生成一个a元素
var a = document.createElement('a');
// 创建一个单击事件
var event = new MouseEvent('click');
a.download = name || new Date().getTime();
// 将生成的URL设置为a.href属性
a.href = url;
// 触发a的单击事件
image.src = document.querySelector(selector).src
</body>
</html>
"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"/>
<!--// 调用方式-->
<!--// 参数一: 选择器,代表img标签-->
<!--// 参数二: 图片名称,可选-->
<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);
}{
// 生成一个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
}
function isIE() { //ie?
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}
function saveFileForIE(canvas, fileName) {
try {
var blob = canvas.msToBlob();
navigator.msSaveBlob(blob, fileName);
}catch (e) {
owlzerOBj.UTILE.alertP('Please upgrade your browser');
}
}
</body>
</html>