小编Fra*_*oud的帖子

我正在尝试为网站创建一些动态创建页面的缩略图,我已经通过在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' && …