javascript - 有没有一种解决方法可以从 casperjs 中的 Canvas base64 图像获取 context.getImageData() ？

Question

我尝试使用 phantomjs 2.1.1 这段代码:

var webPage = require('webpage');
var page = webPage.create();

page.open("http://google.com", function (status){ 

    var out = page.evaluate(function(){
        var image = new Image();
        image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AwLDiAQSszC7gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAACAElEQVRYw+2WMYvbQBBGv5ndFegsdC6cTkWKFIEcpDkCqfLz3aQx5KqQ5lAXHRhHurW12pkUJsThDhLJyAlhXyWJWfHYmdkdIJFIJBKJRCIxJ3T+L8qT591f1yqBElgCqzxfGAOgi7HxfgvszvabqFUBlXNv8rxiXhmTEwHwqk2Mtcid93UI9RladprT26K4tfa1c5W1C2YHAAhAJ1IPQ8X8cRjQtvXFtI5OH7LsJssqYwoiR8QAAAGWRNfM18Ys+h5FMdnMjq2nyrlba2+y7KW1BWDpZxkYwBBZwFoLoBN5cG4XwoQ6M6OiXwDvi+Jdlr1yriQ6OtEJAJjIAhmRAi1RfThM0OJR0UugYq6sLU6cfukgIgCWqCCqrK2Yl5OSyKMyuMrzlTELZvec06mZI1owr4xZ5Xk5924tjMmJ3B8sY8ABOdHxSJtX62KM0+pi9KoBkN9FChAAr9rFOK/WDmi8b2LsRIIqAFV9Gnb8GFQ7kSbGxvvZO3EL1CL1MLSqw3Nmx9dBtVWth6EW2U5K4vh6FFkaUxpzxWwBftKMg2oL3Me46fv142Mtcphb6wBARKy9AjKijIiPx+mPeupVd6r3MX7q+3UIn/f7r5fZrR3g+35vjIooQEQB6FW96jfVB5EvIWz6fh3C5oyr+h8dbP6vMXDuoTmRSCQSiURiPN8BXZXzZJhVHqQAAAAASUVORK5CYII=";

        var x = 0, y = 0;
        image.width  = 50;
        image.height = 50;

        var canvas = document.createElement('canvas');
        canvas.id     = "mycanvas";
        canvas.width  = 50;
        canvas.height = 50;

        var context = canvas.getContext("2d");

        document.body.appendChild(canvas);

        context.drawImage(
            image,
            x,
            y,
            canvas.width,
            canvas.height,
            0,
            0,
            image.width,
            image.height
        );
        var imageData = context.getImageData(x, y, canvas.width, canvas.height);
        var data = imageData.data;

        var pix = 0;
        var text = "";

        // iterate over all rgba values of each pixels
        for (var i = 0; i < data.length; i += 4) {
            pix++;
            red   = data[i];
            green = data[i+1];
            blue  = data[i+2];
            alpha = data[i+3];

            text += "pix " + pix + " red="+red+" green="+green+" blue="+blue+" alpha="+alpha+"\n";
        }
        return text;
    });
    console.log("out"+out);
    phantom.exit();
});

脚本应打印该图像的 rgba 值，但均为 rgba(0,0,0,0)。

如果您将评估部分复制粘贴到 chrome 开发工具版本 55.0.2883.75 64 位或 firefox 50.0.2(例如)中，您将看到 和值 != rgba(0,0,0,0) 从控制台内。

所以在 casperjs ，我也无法获取 rgba 值。 有人知道另一种获取此 rgba 值并从 Base64 图像修改这些值的方法吗？如果可能的话，在普通版 javascript

错误报告:https://github.com/ariya/phantomjs/issues/14692

Answer 1

找到了解决方法:需要在另一个 evaluate() 之前创建图像元素:

var casper = require("casper").create();

casper.start();

casper.on('remote.message', function(message) {
    console.log(message);
});

// first evaluate() to create the image
casper.thenEvaluate(function() {
    // create original image to be copied
    // in the canvas (mandatory to do this first step)
    var originalImg = document.createElement('img');
    originalImg.id = 'myoriginalimg';
    originalImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AwLDiAQSszC7gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAACAElEQVRYw+2WMYvbQBBGv5ndFegsdC6cTkWKFIEcpDkCqfLz3aQx5KqQ5lAXHRhHurW12pkUJsThDhLJyAlhXyWJWfHYmdkdIJFIJBKJRCIxJ3T+L8qT591f1yqBElgCqzxfGAOgi7HxfgvszvabqFUBlXNv8rxiXhmTEwHwqk2Mtcid93UI9RladprT26K4tfa1c5W1C2YHAAhAJ1IPQ8X8cRjQtvXFtI5OH7LsJssqYwoiR8QAAAGWRNfM18Ys+h5FMdnMjq2nyrlba2+y7KW1BWDpZxkYwBBZwFoLoBN5cG4XwoQ6M6OiXwDvi+Jdlr1yriQ6OtEJAJjIAhmRAi1RfThM0OJR0UugYq6sLU6cfukgIgCWqCCqrK2Yl5OSyKMyuMrzlTELZvec06mZI1owr4xZ5Xk5924tjMmJ3B8sY8ABOdHxSJtX62KM0+pi9KoBkN9FChAAr9rFOK/WDmi8b2LsRIIqAFV9Gnb8GFQ7kSbGxvvZO3EL1CL1MLSqw3Nmx9dBtVWth6EW2U5K4vh6FFkaUxpzxWwBftKMg2oL3Me46fv142Mtcphb6wBARKy9AjKijIiPx+mPeupVd6r3MX7q+3UIn/f7r5fZrR3g+35vjIooQEQB6FW96jfVB5EvIWz6fh3C5oyr+h8dbP6vMXDuoTmRSCQSiURiPN8BXZXzZJhVHqQAAAAASUVORK5CYII=";
    document.body.appendChild(originalImg);
})

casper.then(function(){
    casper.wait(1000);
})

// second evaluate() to create the canvas from the image
casper.thenEvaluate(function() {
    // copy the original image in a canvas
    var imgInInput = document.querySelector('#myoriginalimg');
    var imageObj = new Image();
    imageObj.src = imgInInput.getAttribute('src');
    var canvas = document.createElement('canvas');
    canvas.width = 50;
    canvas.height = 50;
    var context = canvas.getContext('2d');
    context.drawImage(
        imageObj,
        0,
        0,
        canvas.width,
        canvas.height,
        0,
        0,
        canvas.width,
        canvas.height
    );

    var imageData = context.getImageData(0, 0, 50, 50);
    var data = imageData.data; // data of the current image

    var pix = 0;
    for(var i = 0; i < data.length; i += 4) {
        pix++;
        var red   = data[i];
        var green = data[i+1];
        var blue  = data[i+2];
        var alpha = data[i+3];
        data[i+3] = 255; // set transparency to null
        data[i+1] = 255; // set green at maximum just for the test
        console.log(
            pix + "nth pixel" +
            " red=" + red +
            " green=" + green +
            " blue=" + blue +
            " alpha=" + alpha
        );
    }
    // overwrite original image
    context.putImageData(imageData, 0, 0);
    // Create a <div> to put the canva in
    var childDiv = document.createElement("div");
    childDiv.appendChild(canvas);
    // Create the parent <div>
    var parentDiv = document.createElement("div");
    parentDiv.setAttribute('id', 'outputimage');
    parentDiv.setAttribute('style', 'position: absolute;z-index:9999');
    document.body.insertBefore(parentDiv, document.body.firstChild);
    childDiv.setAttribute('id', 'mydivid');
    parentDiv.appendChild(childDiv);
});

casper.then(function() {
    casper.capture("out.png");
    casper.echo(casper.getHTML());
})

casper.run(function() {
    this.exit();
});