如何将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>

- John R

Answer 1

看起来您已经知道如何获取canvas对象的dom属性。

现在您只需要"context"信息（据我理解，这是图像数据）

您可以像这样获取图像数据的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>

- Apolo

---

使用load事件的绝佳解决方案。 - John R

Answer 2

简而言之，不行！

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

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

在画布中，基于脚本创建规则绘制矢量图像。这些规则不以文本形式存储在元素中，而是作为图像存储，并且无法从画布元素中减去。

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

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);

- Mouser

---

{btsdaf} - John R