Thresholding base64 String mit JavaScript

Question

würde Ich mag threshold Filter auf Base64-String verwenden (data:image/png;base64,iVBOR...) mit Hilfe von JavaScript wie folgt aus:

function threshold(base64) { 
    some action whith base64 string... 

    return base64; //base64 is updated by threshold filter  
} 

Ist es möglich, und wenn ja, wie kann ich das tun?

Answer 1

var base64string = "data:image/png;base64,iVBOR..........", 
    threshold = 180, // 0..255 
    ctx = document.createElement("canvas").getContext("2d"), 
    image = new Image(); 

image.onload = function() { 

    var w = ctx.canvas.width = image.width, 
     h = ctx.canvas.height = image.height; 

    ctx.drawImage(image, 0, 0, w, h);  // Set image to Canvas context 
    var d = ctx.getImageData(0, 0, w, h); // Get image Data from Canvas context 


    for (var i=0; i<d.data.length; i+=4) { // 4 is for RGBA channels 
    // R=G=B=R>T?255:0 
    d.data[i] = d.data[i+1] = d.data[i+2] = d.data[i+1] > threshold ? 255 : 0; 
    } 

    ctx.putImageData(d, 0, 0);    // Apply threshold conversion 
    document.body.appendChild(ctx.canvas); // Show result 

}; 
image.src = base64string; 

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData