为什么canvas.toDataURL获取图片是空白。
高洛峰
高洛峰 2016-11-17 15:41:26
0
2
1794
 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是空白的呢

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

Antworte allen(2)
学霸

其实这个问题出现在var canvas = document.createElement('canvas');这句上面,获取是为空,所以换了 var canvas = document.getElementById('canvas')就可以了

三叔

你把

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图片也应该是空白的。所以最后就获取了空白了的图片


Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!