使用javascript獲取Base64 PNG的像素顏色？

Question

我有一個base64編碼的PNG。我需要使用javascript來獲取像素的顏色。我想我必須將其轉換回正常的PNG。 任何人都可以指向正確的方向嗎？

Answer 1

使用base64圖像作爲源創建一個Image對象。然後，您可以將圖像繪製到畫布上，並使用getImageData函數獲取像素數據。

這裏是基本的想法（我沒有測試過這一點）：

var image = new Image(); 
image.onload = function() { 
    var canvas = document.createElement('canvas'); 
    canvas.width = image.width; 
    canvas.height = image.height; 

    var context = canvas.getContext('2d'); 
    context.drawImage(image, 0, 0); 

    var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 

    // Now you can access pixel data from imageData.data. 
    // It's a one-dimensional array of RGBA values. 
    // Here's an example of how to get a pixel's color at (x,y) 
    var index = (y*imageData.width + x) * 4; 
    var red = imageData.data[index]; 
    var green = imageData.data[index + 1]; 
    var blue = imageData.data[index + 2]; 
    var alpha = imageData.data[index + 3]; 
}; 
image.src = base64EncodedImage;