Question

我正在尝试使用HTML并将其放入javascript中用于移动Safari的画布，然后将其转换为图像。我正在使用cordova。我可以使用HTML创建一个画布，但是当我在画布上执行toDataURL（）时，我收到一个安全警告 - “SecurityError（DOM Exception 18）：操作不安全。”我相信这是因为foreignObject标记，但是需要在svg中包含HTML！

    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:14px'>" +
             "<div xmlns='http://www.w3.org/1999/xhtml'>" +
             "<b>Now is the </b><i>time for all good men to come to the aid of their country</i>" +
             "</div></div>" +
             "</foreignObject>" +
           "</svg>"
        ;

        var img = new Image();

        img.src = data;

        img.onload = function() {
            context.drawImage(img, 100, 100);                   
        };

我也试过这种方法，但正如其他人所指出的那样，它在safari中不起作用：

var canvas = document.getElementById('canvas');
var ctx    = 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">' +

                 '<em>I</em> like <span style="color:white; text-shadow:0 0 2px blue;">cheese</span>' +
                 '</div>' +
               '</foreignObject>' +
             '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}

img.src = url;

我也尝试过html2canvas但没有成功。

非常感谢任何帮助！

乔恩

将HTML放入画布并转换为移动野生动物园的图像

0 个答案: