是否有辦法從JS中的圖像手動創建base64code

Question

我在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 
      } 

，這是怎麼出來的

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

創建的base64編碼但這對於的RGBA PNG圖像創建的base64編碼。我如何才能從第一個頻道data[i]創建base64代碼，有沒有辦法將其手動編碼爲base64或者提供toDataURL選項來實現？我試圖尋找了文檔，但我找不到任何

感謝

編輯

編輯與坊間建議：

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

，你可以：

1. 將剩餘的灰度值保存到Uint8Array,
2. 將該數組與var s=myUint8Array.toString(),
3. 串聯化，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>