Question

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

在以下示例中，我获得了带有span属性的outerHTML标记的字符串值。同样，我希望获得“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

总之没有！

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

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

在canvas中，矢量图像是根据脚本中创建的规则绘制的。这些规则不作为文本存储在元素中，而是作为图像存储，不能从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);

Answer 2

好像你已经知道如何获得canvas对象的dom属性。现在你只需要＆＃34; context＆＃34;信息（我理解的图像数据）

您可以将图像数据作为base64字符串获取，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: