Erstellen von Base64-Daten aus HTML-Canvas ImageData ohne Canvas Element

Question

Ich habe ein Canvas-Element CA, wo ich einige ausgefallene Sachen aufzeichnen. Dann starte ich einen Filter über die ImageData IDA von Canvas CA und erstelle neue, modifizierte ImageData . Jetzt möchte ich, dass in eine Base64-Zeichenfolge ohne die Notwendigkeit eines zweiten Helfer-CanvasCB konvertiert werden kann.

Alles, was ich zu diesem Thema gefunden habe, zeigt eine ganze Leinwand, die in eine DatenURL umgewandelt wird. Ist es möglich ohne CB? Wie?

var CA = document.getElementById("CA"); 
 
var ctx = CA.getContext("2d"); 
 

 
ctx.beginPath(); 
 
ctx.fillRect(100, 100, 100, 100); 
 
ctx.stroke(); 
 
ctx.closePath(); 
 

 
var srcImg = ctx.getImageData(0, 0, CA.width, CA.height), 
 
    srcData = srcImg.data, 
 
    dstImg = ctx.createImageData(srcImg), 
 
    dstData = dstImg.data; 
 

 
for (var i=0, maxI=srcData.length; i<maxI; i+=4) { 
 
    //invert 
 
    if (srcData[i+3] > 0) {  
 
    dstData[i] = dstData[i+1] = dstData[i+2] = 255; 
 
    dstData[i+3] = 0; 
 
    } 
 
    else { 
 
    dstData[i] = dstData[i+1] = dstData[i+2] = 0;   
 
    dstData[i+3] = 255; 
 
    } 
 
} 
 

 
//how to create base64 from dstImg?? 
 
//... 
 

 
//just for visualization 
 
document.getElementById("CB").getContext("2d").putImageData(dstImg, 0, 0);

canvas { 
 
    border : 1px solid; 
 
}

<canvas id="CA" width="400" height="300"></canvas> 
 
<!-- I'd like to avoid this helper canvas CB --> 
 
<canvas id="CB" width="400" height="300"></canvas>

Answer 1

Sie könnten das Original <canvas> Element klonen, .putImageData(), clone.toDataURL()

var CA = document.getElementById("CA"); 
 
var ctx = CA.getContext("2d"); 
 

 
ctx.beginPath(); 
 
ctx.fillRect(100, 100, 100, 100); 
 
ctx.stroke(); 
 
ctx.closePath(); 
 

 
var srcImg = ctx.getImageData(0, 0, CA.width, CA.height), 
 
    srcData = srcImg.data, 
 
    dstImg = ctx.createImageData(srcImg), 
 
    dstData = dstImg.data; 
 

 
for (var i = 0, maxI = srcData.length; i < maxI; i += 4) { 
 
    //invert 
 
    if (srcData[i + 3] > 0) { 
 
    dstData[i] = dstData[i + 1] = dstData[i + 2] = 255; 
 
    dstData[i + 3] = 0; 
 
    } else { 
 
    dstData[i] = dstData[i + 1] = dstData[i + 2] = 0; 
 
    dstData[i + 3] = 255; 
 
    } 
 
} 
 

 
var clone = document.getElementById("CA").cloneNode(); 
 
var ctx = clone.getContext("2d"); 
 
ctx.putImageData(dstImg, 0, 0); 
 
var url = clone.toDataURL(); 
 
var img = document.createElement("img"); 
 
img.onload = function() { 
 
    document.body.appendChild(this); 
 
    console.log(url); 
 
} 
 
img.src = url;

canvas { 
 
    border: 1px solid; 
 
}

<canvas id="CA" width="400" height="300"></canvas>