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

Question

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

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

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

示例代码 sn-ps：

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

似乎您已经知道如何获取画布对象的 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>

Answer 2

总之不行！

您应该意识到标准 DOM 元素和画布元素之间的区别：

创建的 DOM 元素是可以查看和更改的标记语言的一部分。

在canvas 中，根据脚本中创建的规则绘制矢量图像。这些规则不是作为文本存储在元素中，而是作为图像存储，不能从画布元素中减去。

但是还有其他可能性。我们可以从 ctx-object 中获取变量。但没有关于坐标的信息：

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 ctxInfo = [];
for (ctxKey in ctx)
{
  if (Object.prototype.toString.call(ctx[ctxKey]) !== "[object Function]" )
  {
    ctxInfo.push(ctxKey + " : " + ctx[ctxKey]);
  }
  
}

console.log(ctxInfo);

为了从一个画布转移到另一个画布，我会保留一个指令列表（数组或对象）并编写一个应用它们的通用函数。

canvasObject = [["beginPath"], ["moveTo", 20, 20], ["lineTo", 100, 20], ["arcTo", 150, 20, 150, 70, 50], ["lineTo", 150, 120], ["stroke"]];

function createCanvas(cnvsObj)
{
  var c = document.createElement("canvas");
  var ctx = c.getContext("2d");
  
  cnvsObj.forEach(function(element){
    //loop through instructions
    ctx[element[0]].apply(ctx, element.slice(1));    
  });
  return c;
}

var a = createCanvas(canvasObject);
document.body.appendChild(a);