使用safari在畫布中繪制包含html的svg

Question

我正在嘗試為網站創建一些動態創建頁面的縮略圖，我已經通過在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' && 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-5313bb​​39bd31

Answer 1

基本上解決方案是將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' 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);

Answer 2

您沒有在Blob上說明您在控制台中獲得的內容，也沒有說明URL。

只需一次拍攝，但您在將其設置為圖像上的源后立即撤消該網址。 如果在 onload事件中加載了圖像后 ，您需要撤消：

img.onload = function() {                   
    DOMURL.revokeObjectURL(url);      /// here
    context.drawImage(img, 100, 100);                                       
};

img.src = url;
//DOMURL.revokeObjectURL(url);        /// not here

看到這有幫助。 如果沒有，那么你可能正在處理特定於Safari的問題。 （您的畫布特定翻譯等也應該在onload事件中，或者至少在設置src屬性之前調用）。