有没有办法从JS中的图像手动创建base64code

Question

我在htmlcanvas中画了一张图。

这就是您计算像素的方式

for (var i = 0; i < data.length; i += 4) {

          var red = data[i]; // red
          var green= data[i + 1]; // green
          var blue = data[i + 2] ; // blue
             }

这就是创建 base64 代码的方式

var dataURL = canvas.toDataURL('image/png');

但这会为具有 RGBa 的 png 图像创建 base64 代码。我该怎么做才能仅从第一个通道创建 base64 代码 data[i] 有没有办法手动将其编码为 base64 或提供 toDataURL 选项来这样做？我尝试查找文档，但找不到任何内容

谢谢

编辑

根据 markE 建议编辑：

    var imageData = ctx.getImageData(0,0,cw, ch);
     var data= imageData.data        
for (var i = 0; i < data.length; i += 4) {
          var grayscale = data[i]*0.2126 + data[i +1]*0.7152 + data[i +2]*0.0722;
          data[i]     = grayscale; // red
          data[i + 1] = grayscale; // green
          data[i + 2] = grayscale; // blue
             }


var binary = new Uint8Array(data.length);
for (var i=0; i<data.length; i++){
  binary[i]=data[i];
}
var s=binary.toString();
 var base = btoa(s);

Answer 1

你可以：

将剩余的灰度值保存到 Uint8Array、
用 var s=myUint8Array.toString()、
Base64 使用 btoa(s).

示例代码如下：

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

var img=new Image();
img.crossOrigin = "Anonymous";
img.onload=function(){
  canvas.width=img.width;
  canvas.height=img.height;
  ctx.drawImage(img,0,0);
  var uint8 = new Uint8ClampedArray(img.width*img.height);
  var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
  var data= imageData.data        
  for (var i = 0; i < data.length; i += 4) {
    var grayscale = data[i]*0.2126 + data[i +1]*0.7152 + data[i +2]*0.0722;
    uint8[i]=grayscale;
  }
var s=uint8[0];
for(var i=1;i<uint8.length;i++){
    s+=','+uint8[i];
}
  alert('As string: '+s);
  var b64=btoa(s);
  alert('As base64 string'+b64);
  var ss=atob(b64);
  alert('Back to original string'+ss);
}
img.src='https://dl.dropboxusercontent.com/u/139992952/multple/house16x16.jpg'

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

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

有没有办法从JS中的图像手动创建base64code

Is there are way to manually create a base64code from an image in JS

javascript

canvas

html5-canvas