為什么canvas.toDataURL獲取圖片是空白

 第一種寫法(錯誤)：

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.html、https://www.bbsmax.com/A/xl56pYa1zr/

 參考博文素材：