我正在尝试为网站创建一些动态页面的缩略图,我找到了一个解决方案,通过将HTML添加到SVG中,然后在画布内绘制图像,之后调整画布大小。
这个解决方案在Firefox和Chrome中有效,但在Safari中却不行,SVG似乎没有被绘制出来,我只得到一个空白页面。即使我加了一些try-catch也没有报错,我在网上也找不到解决方案。
我的HTML只是一个带有画布的基本测试页面,我尝试在头部添加了一个meta标签。
<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构造函数,因此不会进入catch块。问题似乎出在我传递svg引用时(img.src = url),但我无法想到其他什么方法,如果有人有一些想法或解决方案,那就太好了。
编辑:Safari的控制台输出
Blob: Blob {size=232, type="image/svg+xml;charset=utf-8", webkitSlice}
Url: blob:http://myPage.com/96fb502f-46bb-492b-af35-5313bb39bd31
.toDataURL()
吗?或者在 Safari 上会遇到安全错误吗? - Maen