Javascript 有没有办法从JS中的图像手动创建Base64代码

我在html画布中绘制一个图像

这是计算像素的方法

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
             }

但这会为带有RGBa的png图像创建base64代码。如何仅从第一个通道

data[I]

创建base64代码有没有办法手动将其编码到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);

var-imageData=ctx.getImageData（0,0，cw，ch）；
var data=imageData.data
对于（变量i=0；i
将剩余灰度值保存到
Uint8Array
使用
var s=myUint8Array.toString（）字符串化该数组

Base64使用
btoa
对该字符串进行编码
下面是示例代码：


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var img=新图像（）；
img.crossOrigin=“匿名”；
img.onload=函数（）{
canvas.width=img.width；
canvas.height=img.height；
ctx.drawImage（img，0,0）；
var uint8=新uint8夹具阵列（img.宽度*img.高度）；
var imageData=ctx.getImageData（0,0，canvas.width，canvas.height）；
var data=imageData.data
对于（变量i=0；i对于（var i=1；iyou可以将数据设置为表示转换为B+W，但画布输出选项将全部为RGB（有时为A）。您可以使用
（“图像/jpeg”，0.5）
为了只获取RGB，是否有其他方法可以做到这一点？我问的原因是，因为我有一个灰度图像，所以我不需要其他通道来传递图像。您可以（1）将剩余的灰度值保存到
Uint8Array
，（2）使用
var s=myUint8Array.toString字符串化该数组（）
，（3）Base64用
btoa（s）
对该字符串进行编码。我的问题是，您将使用该结果做什么？好的，我添加了您提出的建议，谢谢！我想我现在更接近了。但为什么二进制数组是空的？我的意思是结果是[object Uint8Array]非常感谢你，但是，如果我运行你的代码，b64将是一个空对象againIt对我来说很好…我在Chrome、Firefox、Edge中获得了一个有效的Base64编码。你是在运行我的上面的演示还是在使用你自己的图像？你是否遇到跨域安全冲突？我正在使用你的代码片段，我得到了“W29iamVjdCBVaW50OEFycmF5XQ==”作为一个警报，并且没有跨域安全违规您的警报结果在我看来很成功——一个Base64编码的字符串。
    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);