用safari在画布中绘制包含html的svg
我试图为一个网站创建一些动态创建页面的缩略图，我找到了一个解决方案，我在svg中添加了html，然后在画布中的一个图像上绘制，然后在图像绘制后调整大小。
此解决方案适用于firefox和chrome，但在safari中不起作用，svg似乎没有绘制--我只是得到了一个空白页。我没有任何错误，即使我放了一些尝试捕捉，我无法找到一个解决方案在网上。
我的html只是一个带有画布的基本测试页面，我试图在头上添加一个元标记。
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />但也没用。
下面是我写的代码：
var canvas = document.getElementById('canvasTest'),
context = canvas.getContext('2d');
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
"<div>TEST<span>TEST</span></div>" +
"</div>" +
"</foreignObject>" +
"</svg>"
;
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
try {
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
} catch(e) {
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
console.log(window.BlobBuilder);
if(e.name == 'TypeError' && window.BlobBuilder){
var bb = new BlobBuilder();
bb.append(data);
var svg = bb.getBlob("image/svg+xml;charset=utf-8");
} else if(e.name == "InvalidStateError") {
var svg = new Blob(data, {type : "image/svg+xml;charset=utf-8"});
} else {
}
}
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
context.drawImage(img, 100, 100);
};
img.src = url;
DOMURL.revokeObjectURL(url);
context.translate(canvas.width / 2, canvas.height / 2);
context.scale(0.4, 0.4);Safari可以使用Blob构造函数，这样它就不会被捕获。问题似乎是当我传递svg引用(img.src = url)时，我不知道该做什么不同，如果有人有一些想法或解决方案，那就太好了。
编辑: safari的控制台输出
Blob: Blob {size=232，type=“映像/svg+xml；charset=utf-8”，webkitSlice}
网址: blob:http://myPage.com/96fb502f-46bb-492b-af35-5313bb39bd31
回答 2
Stack Overflow用户
发布于 2014-01-13 08:10:04
基本上，解决方案是将mime类型(数据:image/ svg +xml)放入包含svg的变量中，这样您就不需要再使用blob，然后在将它绘制到画布之前使用svg设置img。
var canvas = document.getElementById('canvasTest'),
context = canvas.getContext('2d');
var data = "data:image/svg+xml,"+"<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
"<div xmlns='http://www.w3.org/1999/xhtml'>aaaa<span>aaaa</span></div>" +
"</div>" +
"</foreignObject>" +
"</svg>"
;
var img = new Image();
img.src = data;
img.onload = function() {
context.drawImage(img, 100, 100);
};
context.translate(canvas.width / 2, canvas.height / 2);
context.scale(0.4, 0.4);Stack Overflow用户
发布于 2014-01-10 13:09:24
您不需要在Blob或URL上说明在控制台中得到了什么。
只是一次尝试，但在将url设置为图像上的源之后，您就会撤销它。如果映像已加载到onload事件中，则需要撤消：
img.onload = function() {
DOMURL.revokeObjectURL(url); /// here
context.drawImage(img, 100, 100);
};
img.src = url;
//DOMURL.revokeObjectURL(url); /// not here看看这能帮上忙。如果没有，那么您可能正在处理Safari特定的问题。(画布特定的翻译等也应该在onload事件中，或者至少在设置src属性之前调用)。
https://stackoverflow.com/questions/21049179
复制相似问题
腾讯云开发者
