1.首先检查服务器端返回的图片是否允许跨域
2.img标签设置crossorigin="anonymous" 属性
场景:长按保存图片
贴代码:
<!-- canvas -->
<div id="share_canvas"></div>
<a id="saveImg"></a>
别忘了引入(这里使用了html2canvas插件,这两个js可以在网上下载)
<script src="js/jquery-3.5.1.js"></script>
<script src="js/html2canvas.js"></script>
// 长按保存图片
var timeout;
$("#share_code").on({
touchstart: function(e) {
timeout = setTimeout(function() {
var url = "https://uoss.wujicat.com/image/2021/02/c8945bc442ed42a624c3a11c0ad36258.jpg";
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();
img.crossOrigin = 'Anonymous'; // 设置image对象可跨域请求
img.src = url + "?timeStamp=" + new Date().getTime(); //解决缓存引起访问失败需要添加时间戳
img.onload = function() {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL('image/jpeg');
console.log(dataURL)
$("#img1").attr("src", dataURL)
// 赋值完成,生成图片
var myDate = new Date();
new html2canvas(document.getElementById('share_canvas'), {
allowTaint: true,
useCORS: true
}).then(canvas => {
var triggerDownload = $("#saveImg").attr("href", dataURL).attr("download", dateFtt(
"yyyy-MM-dd hh:mm:ss", myDate) +
'.png');
console.log(triggerDownload)
triggerDownload[0].click(); //模拟点击!
});
};
}, 2000);
},
touchmove: function() {
clearTimeout(timeout);
},
touchend: function(e) {
clearTimeout(timeout);
},
});
});
//日期格式转化
function dateFtt(fmt, date) { //author: meizz
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"h+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}