用html画苹果手机,在Safari浏览器中绘制包含HTML的svg

我正在尝试为网站创建一些动态创建的页面的缩略图，我发现了一个解决方案，通过在svg中添加html，然后在内部的图像上绘制在绘制图像后调整大小的画布。在Safari浏览器中绘制包含HTML的svg

该解决方案在firefox和chrome中运行，但不在safari中，svg似乎没有绘制，我只是得到一个空白页面。即使我尝试了一些尝试并且无法在网上找到解决方案，我也没有收到任何错误。

我的HTML就是用帆布一个基本的测试页，我试图在头上

添加meta标签，但它也不能工作。

这是我写的代码：

var canvas = document.getElementById('canvasTest'),

context = canvas.getContext('2d');

var data = "" +

"" +

"

" +

"

TEST TEST

" +

"

" +

"" +

""

;

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)时，但我无法弄清楚如何做不同的处理，如果有人有一些想法或解决方案，它会很棒。

编辑：控制台输出用于狩猎

斑点：斑点{尺寸= 232，类型= “图像/ SVG + xml的;字符集= UTF-8”，webkitSlice}

+0

你以后可以使用'.toDataURL()'，或者你会在Safari上遇到安全错误吗？ –