javascript - How to convert Canvas element to string - Stack Overflow

admin管理员组

文章数量:1336643

In general we can convert the HTML elements to string and then we can insert it into DOM later when needed. Similarly, I want to convert the "CANVAS" element to string along with its context properties.

In the following example, I am getting the string value of span tag with outerHTML property. Likewise I want to get the "CANVAS"element along with context properties.

Is there any method or property for this support?

Example code snippets:

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=".1.1/jquery.min.js"></script>
<div id="test1">
<span>E1</span>
</div>

<div id="test2">

</div>

In general we can convert the HTML elements to string and then we can insert it into DOM later when needed. Similarly, I want to convert the "CANVAS" element to string along with its context properties.

In the following example, I am getting the string value of span tag with outerHTML property. Likewise I want to get the "CANVAS"element along with context properties.

Is there any method or property for this support?

Example code snippets:

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1">
<span>E1</span>
</div>

<div id="test2">

</div>

• javascript
• jquery
• html
• canvas

Share Improve this question Follow asked Oct 23, 2017 at 12:33 John RJohn R 2,79122 gold badges1515 silver badges3333 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Seems like you already know how to get dom properties of the canvas object. Now you only need "context" infos (image data as I understand it)

You can get the image data as a base64 string like this:

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>

In short no!

You should realize the difference between a standard DOM-element and a canvas-element:

A created DOM-element is part of the mark-up language that can be viewed and changed.

In the canvas a vector image is drawn based upon the rules created in script. These rules are not stored in the element as text but as the image and can't be subtracted from the canvas element.

However there are other possibilities. We can get the variables from the ctx-object. But no info about coordinates:

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

To transfer from one canvas to the other I would keep a list (array or object) of instructions and write a generic function that applies them.

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

本文标签： javascriptHow to convert Canvas element to stringStack Overflow