javascript - 带有 Canvas 的 DOM

Question

我正在尝试 MDN 中的示例，其中 HTML 片段被绘制到 Canvas 上。 https://jsfiddle.net/c5xrkgL3/

但是我添加了一个  在“喜欢”这个词中，现在它不再起作用了。

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> li&nbsp;ke ' +
            '<span style="color:white; text-shadow:0 0 2px blue;">' +
            'cheese</span>' +
          '</div>' +
          '</foreignObject>' +
          '</svg>';

data = encodeURIComponent(data);


var img = new Image();

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  console.log(canvas.toDataURL());

  canvas.toBlob(function(blob) {
    var newImg = document.createElement('img'),
    url = URL.createObjectURL(blob);

    newImg.onload = function() {
      // no longer need to read the blob so it's revoked
      URL.revokeObjectURL(url);
    };

    newImg.src = url;
    document.body.appendChild(newImg);
  });
}

img.src = "data:image/svg+xml," + data

https://jsfiddle.net/c5xrkgL3/1/

知道我应该做什么才能使  示例工作(同时保留实际的   在那里)？

原始 MDN 文章:https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

Answer 1

  是 not a valid XML entity 。

只有 5 个有效的 XML 实体

• “
• &
• '
• <
• >

HTML 有一个更长的有效实体列表，您可以从中获取  ，但您没有使用 HTML 文档。

您需要使用  ，而不是  ，例如like 或作为标记:li ke