Canvas要素を文字列に変換する方法

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プロパティを取得する方法を知っているように思えます。 （私はそれを理解するように、画像データ）今、あなたは唯一のあなたは、このような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要素、キャンバス要素の違いを実現する必要があります

Aは、DOM要素を表示および変更することができるマークアップ言語の一部で作成しました。

canvasでは、スクリプトで作成されたルールに基づいてベクターイメージが描画されます。これらのルールは、テキストとして要素に格納されるのではなく、画像として格納され、キャンバス要素から減算することはできません。

しかし、他の可能性もあります。 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);

私は命令のリスト（配列やオブジェクト）を保持し、それらを適用する一般的な機能を記述し、他の1つのキャンバスから転送します。

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