javascript - 如何将 Canvas 元素转换为字符串

Question

一般我们可以将HTML元素转换成字符串，然后在需要的时候插入到DOM中。同样，我想将“CANVAS”元素及其上下文属性一起转换为字符串。

在下面的示例中，我使用 outerHTML 属性获取 span 标记的字符串值。同样，我想获取“CANVAS”元素以及上下文属性。

这个支持有什么方法或者属性吗？

示例代码片段:

var sp=document.createElement("span");
sp.innerHTML = "E2"
var e2 = sp.outerHTML;
$("#test1").append(e2);

var c=document.createElement("CANVAS");
var ctx=c.getContext("2d");
ctx.beginPath(); 
ctx.moveTo(20,20);           
ctx.lineTo(100,20);          
ctx.arcTo(150,20,150,70,50); 
ctx.lineTo(150,120);         
ctx.stroke(); 
var cn = c.outerHTML;
$("#test2").append(cn);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1">
<span>E1</span>
</div>

<div id="test2">

</div>

Answer 1

您似乎已经知道如何获取 canvas 对象的 dom 属性。现在你只需要“上下文”信息(我理解的图像数据)

您可以像这样将图像数据作为 base64 字符串获取:

function CreateDrawing(canvasId) {
  let canvas = document.getElementById(canvasId);
  let ctx = canvas.getContext('2d');
  ctx.beginPath(); 
  ctx.moveTo(20,20);           
  ctx.lineTo(100,20);          
  ctx.arcTo(150,20,150,70,50); 
  ctx.lineTo(150,120);         
  ctx.stroke();
}

function GetDrawingAsString(canvasId) {
  let canvas = document.getElementById(canvasId);
  let pngUrl = canvas.toDataURL(); // PNG is the default
  // or as jpeg for eg
  // var jpegUrl = canvas.toDataURL("image/jpeg");
  return pngUrl;
}

function ReuseCanvasString(canvasId, url) {
  let img = new Image();
  img.onload = () => {
    // Note: here img.naturalHeight & img.naturalWidth will be your original canvas size
    let canvas = document.getElementById(canvasId);
    let ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
  }
  img.src = url;
}

// Create something
CreateDrawing("mycanvas");
// save the image data somewhere
var url = GetDrawingAsString("mycanvas");
// re use it later
ReuseCanvasString("replicate", url);

<canvas id="mycanvas"></canvas>
<canvas id="replicate"></canvas>