在一个带有safari的画布中绘制包含html的svg [英] Drawing an svg containing html in a canvas with safari

问题描述

我试图为一个网站创建一些动态创建页面的缩略图，我已经找到一个解决方案，通过在svg中添加html，然后我绘制在画布上的图像，我绘制图像后调整大小。

I'm trying to create some thumbnails of dynamically created pages for a website, i have found a solution by adding the html in a svg which I then draw on an image inside a canvas that I resize after the image has been drawn.

这个解决方案适用于firefox和chrome，但不是在safari中，svg似乎不是绘制我只是得到一个空白页。我没有得到任何错误，即使我把一些尝试catch，我找不到一个解决方案在网上。

This solution works in firefox and chrome but not in safari, the svg doesn't seem to be drawn I just get a blank page. I don't get any error even if i put some try catch and I couldn't find a solution on the web.

我的html只是一个带有画布的基本测试页，我试图在头上添加一个元标记

My html is just a basic test page with a canvas, I tried to add a meta tag on the head

<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 can use the Blob constructor so it doesn't go in the catch. It seems like the problem is when I pass the svg reference (img.src = url) but i can't figure out what to do differently, if someone has some ideas or solution it would be great.

编辑：safari的控制台输出

console output for safari

Blob：Blob {size = 232，type =image / svg + xml; charset = utf- 8，webkitSlice}

Blob: Blob {size=232, type="image/svg+xml;charset=utf-8", webkitSlice}

网址：blob： http： //myPage.com/96fb502f-46bb-492b-af35-5313bb​​39bd31

推荐答案

基本上，解决方案是在包含svg的变量中的mime类型（数据：image / svg + xml），这样你不需要再使用blob，然后在绘制到canvas之前用svg设置img src。 p>

Basically the solution was to put the mime type(data:image/svg+xml) in the variable containing the svg, this way you don't need to use the blob anymore and then to set the img src with the svg before drawing it to the canvas.

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);

这篇关于在一个带有safari的画布中绘制包含html的svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！