Question

这是我的fiddle example 在我的代码中，我有三个div，第一个有可拖动和可调整大小的文本框，第二个div就像预览一样。
我尝试使用HTML 5画布将此预览div的innerHTML转换为图像我找到this示例，只是这样尝试。
我在drawImage事件上调用resizeEnd函数但我可以为我的预览div的innerHTML制作图像我的代码有什么问题？
我该如何解决这个问题？

HTML

First<br/>

<div id="container">
    <div id="resizable" class="ui-widget-content">This is text Line 1<br/>
    This is text Line 1<br/>

    </div>
    <img src="http://www.psdgraphics.com/file/abstract-background.jpg" width="400" height="150" />
</div>

<br/>Second<br/>

<div id="previewContainer">
    <div id="previewText" xmlns='http://www.w3.org/1999/xhtml' class="ui-widget-content2">This is text Line 1<br/>
    This is text Line 1<br/>
</div>
    <img src="http://www.psdgraphics.com/file/abstract-background.jpg" width="400" height="150" />
</div>

<br/>
<canvas id="myCanvas" width="400" height="150" style="border:1px solid #d3d3d3;">

的Javascript

var DEF_HEIGHT = 100; // the #resizable default height
var $preview = $('#previewText');

$("#resizable").resizable({
    containment: 'parent',
    handles: "se",
    aspectRatio: true,
    resize: function (event, ui) {
        var curHeight = (ui.size.height / DEF_HEIGHT) * 100;
        $(this).css('font-size', curHeight + '%');
    },
    stop: function (event, ui) {
        $preview.css({width: this.style.width, height: this.style.height, fontSize:this.style.fontSize});

      var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

        var data = "<svg xmlns='http://www.w3.org/2000/svg' width='400' height='150'>" +
             "<foreignObject width='100%' height='100%'>" +               
document.getElementById('previewText').innerHTML +            
             "</foreignObject>" +
           "</svg>";

        var DOMURL = self.URL || self.webkitURL || self;
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;

      //  var img = new Image();
//img.src = document.getElementById('previewText').innerHTML;
       // ctx.drawImage(img, 0, 0);
    }
})
.draggable({
    containment: 'parent',
    start: function () {},
    drag: function () {},
    stop: function (e, ui) {
        $preview.css($(this).position());
    }
});

Answer 1

由于某种原因，<br/>标签似乎打破了代码。如果您附加了错误处理程序并打印了您将看到的URL，例如：

img.onerror = function() {console.log(url)};

> blob:ffad7714-9640-46f4-b726-f056a93e5e8b

将其粘贴到地址栏中，您可以阅读错误消息：

XML Parsing Error: mismatched tag. Expected: </br>. Location:
blob:ffad7714-9640-46f4-b726-f056a93e5e8b Line Number 5, Column 7:   
</div></foreignObject></svg>
------^

如果您删除这些br代码并将其替换为p代码，则会起作用：
的 Modified fiddle

我无法回答为什么（我已经多次查看并试过各种组合，甚至不是自我关闭的版本，但除非我错过了一些似乎是个问题）。

您可以改进代码：确保引号相同 - 例如，请参阅此处的xmlns定义（因为您要合并字符串）：

<div id="..." xmlns='...' class="..."> ^ ^ ^ ^ ^ ^

如果您打算在div中包含xml命名空间规范（必须使用），则需要使用outerHTML而不是innerHTML。

document.getElementById('previewText').outerHTML

话虽如此：SVG还有许多其他限制。引用外部图像的任何外部参考（如图像或css）可能会阻止您绘制SVG。将SVG与画布一起使用时，一切都必须内联。

无法将我的div innerHTML绘制到画布上

1 个答案: