javascript - 为什么canvas.toDataURL获取图片是空白。
本文介绍了javascript - 为什么canvas.toDataURL获取图片是空白。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
var type = 'png';
var canvas = document.createElement('canvas');
var imgData = canvas.toDataURL(type);
var _fixType = function(type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};
imgData = imgData.replace(_fixType(type), 'image/octet-stream');
var saveFile = function(data, filename) {
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);
};
var filename = 'weiyin_' + (new Date()).getTime() + '.' + type;
saveFile(imgData, filename);
为什么我最后下载出来的png是空白的呢
解决方案
你把
var imgData = canvas.toDataURL(type);
这句放在获取_fixType
后面,并传一个_fixType
进去再试试
var fixType = _fixType(type);
var imgData = canvas.toDataURL(fixType);
imgData = imgData.replace(fixType, 'image/octet-stream');
var canvas = document.createElement('canvas');
这句代码的意思,新创建一个空白canvas元素,所以后面获取到的base64图片也应该是空白的。所以最后就获取了空白了的图片
这篇关于javascript - 为什么canvas.toDataURL获取图片是空白。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文