从没有 canvas 元素的 HTML Canvas ImageData 创建 Base64 数据

Question

我有一个 canvas 元素 CA，我正在其中绘制一些奇特的东西。然后我运行对来自 canvas CA 的 ImageData IDA 进行了某种过滤，并创建了新的、修改后的 ImageData IDB。现在，我希望将此 IDB 转换为 base64 字符串 而无需第二个助手 canvas CB.

我在这个主题上找到的所有内容都显示整个 canvas 正在转换为 dataURL。没有CB可以吗？怎么样？

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

您可以克隆原始 <canvas> 元素，.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>

从没有 canvas 元素的 HTML Canvas ImageData 创建 Base64 数据

Create Base64 data from HTML Canvas ImageData without canvas Element

html

javascript

base64

canvas

html5-canvas