[英]Canvas toDataURL() returns blank image in Firefox even with .onload and callbacks
I have a problem with toDataURL() function in FireFox 我在FireFox中的toDataURL()函数有问题
Imagine I have such base64 image: 想象一下,我有这样的base64图像:
var url = " data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTkgMTE5Ij48Zz48Y2lyY2xlIGN4PSI1NyIgY3k9IjYyIiByPSI1NyIgc3R5bGU9ImZpbGw6IHJnYigxNjAsIDE2MSwgMTYzKTsgb3BhY2l0eTogMC42OyIvPjxjaXJjbGUgY3g9IjU3IiBjeT0iNTciIHI9IjU3IiBzdHlsZT0iZmlsbDogcmdiKDEyMywgMjEwLCAyNDApOyIvPjxjaXJjbGUgY3g9IjU3IiBjeT0iNTciIHI9IjQ1IiBzdHlsZT0iZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyIvPjx0ZXh0IGR4PSI1NyIgZHk9IjY1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBzdHlsZT0iZm9udC1zaXplOjI1cHg7IGZpbGw6ICMyYjJmMmU7IGZvbnQtZmFtaWx5OiAnRElOUHJvIFJlZ3VsYXInLCBzYW5zLXNlcmlmOyBmb250LXdlaWdodDogYm9sZCI+MTUlPC90ZXh0PjwvZz48L3N2Zz4=";
And then I want to resize it and send new uri back: 然后我想重新调整它并发回新的uri:
function getImageUri(url, callback) {
image = new Image();
image.onload = function() {
var image = this;
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
dataURL;
context.drawImage(image, 0, 0, 60, 60);
callback(canvas.toDataURL());
}
image.src = url;
}
At the end I just call it to get new uri 最后,我只是称它为新的uri
getImageUri(url, function (uri) {
console.log(uri);
document.getElementById('circle').innerHTML = "<img src=" + uri + ">";
});
Here is the codepen of this example. 这是这个例子的代码。 It works in Chrome, but not in FireFox.
它适用于Chrome,但不适用于FireFox。
I've searched a lot for similar questions here and most of time the reason was use of image without waiting for its loading, but I have this .onload thing, right? 我在这里搜索了很多类似的问题,大多数时候原因是使用图像而不等待它的加载,但我有这个.onload的东西,对吗?
And also I've tried to make same actions as in this question, but FF is still showing just transparent image. 而且我也尝试过和这个问题一样的动作,但是FF仍然只显示透明的图像。 Please help!
请帮忙!
There's a bug open in Firefox about this: drawImage() fails silently when drawing an SVG image without @width or @height . 在Firefox中有一个错误: 在绘制没有@width或@height的SVG图像时,drawImage()会无声地失败 。
You can fix it by adding (go figure) width
and height
to the SVG: 您可以通过向SVG添加(去图)
width
和height
来修复它:
<svg
xmlns="http://www.w3.org/2000/svg"
width="119" height="119" viewBox="0 0 119 119">
…
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.