是否有一个解决方法从casperjs中的画布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图像中的值吗？如果可能的话，可以在vanilla javascript中找到

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

Answer 1

找到一种解决方法：需要先在另一个yield from ((x, y) for x in i for y in j) 中创建image元素：

evaluate()