码迷,mamicode.com
首页 > Web开发 > 详细

为什么canvas.toDataURL获取图片是空白

时间:2020-07-23 22:46:24      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:loading   lazy   max   mamicode   canvas   var   code   gif   头部   

 第一种写法(错误):

var downLoadImgUrl = $("#QRCode-item canvas")[0].toDataURL("image/png");

 

第二种写法(正确):

var _fixType = function(type) {
    type = type.toLowerCase().replace(/jpg/i, ‘jpeg‘);
    var r = type.match(/png|jpeg|bmp|gif/)[0];
    return ‘image/‘ + r;
};
var type = ‘png‘;
var fixType = _fixType(type);
downLoadImgUrl = $("#QRCode-item canvas")[0].toDataURL(fixType);
downLoadImgUrl = downLoadImgUrl.replace(fixType, ‘image/octet-stream‘);

 

以上两种写法生成的图片地址:

技术图片

 

 第三种写法(正确):

var data = $("#QRCode-item canvas")[0].toDataURL().replace("image/png", "image/octet-stream;");//获取二维码值,并修改响应头部。
var filename="tupian.png";//保存的图片名称和格式,canvas默认使用的png格式。这个格式效果最好。
var save_link = document.createElementNS(‘http://www.w3.org/1999/xhtml‘, ‘a‘);
save_link.href = data;
save_link.download = filename;

var event = document.createEvent(‘MouseEvents‘);
event.initMouseEvent(‘click‘, true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);

 

其他页面图片预览的src:

技术图片

 

##################################################################################################################################################

 参考博文链接:https://www.it1352.com/718250.htmlhttps://www.bbsmax.com/A/xl56pYa1zr/

 参考博文素材:

技术图片

 

为什么canvas.toDataURL获取图片是空白

标签:loading   lazy   max   mamicode   canvas   var   code   gif   头部   

原文地址:https://www.cnblogs.com/syjp/p/13367419.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!