我正在尝试为网站创建一些动态创建页面的缩略图,我已经通过在svg中添加html找到了解决方案,然后我在画布内的图像上绘制,我在绘制图像后调整大小.
这个解决方案适用于firefox和chrome,但不适用于safari,svg似乎没有被绘制我只是得到一个空白页面.即使我把一些尝试捕获,我也没有得到任何错误,我无法在网上找到解决方案.
我的html只是一个带有画布的基本测试页面,我试图在头上添加一个元标记
但它也没有用.
这是我写的代码:
var canvas = document.getElementById('canvasTest'), context = canvas.getContext('2d'); var data = "" ; 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}
网址:blob:http://myPage.com/96fb502f-46bb-492b-af35-5313bb39bd31
基本上解决方案是将mime类型(data:image/svg + xml)放在包含svg的变量中,这样你就不需要再使用blob了,然后在绘制之前用svg设置img src到画布.
var canvas = document.getElementById('canvasTest'), context = canvas.getContext('2d'); var data = "data:image/svg+xml,"+"<svg xmlns='http://www.w3.org/2000/svg' >" + "<foreignObject >" + "<div xmlns='http://www.w3.org/1999/xhtml' >" + "<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);