是否有从casperjs中的canvas base64图像获取context.getImageData（）的解决方法？

我使用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();
});

var webPage=require（'webPage'）；
var page=webPage.create（）；
第页打开（“http://google.com“，功能（状态）{
var out=page.evaluate（函数（）{
var image=新图像（）；
image.src="数据：图片/png；base64，IVBorW0KggoaaaAnsuheugaaAYCAIAACRXR/MaaacXbiwXmaaaastaaaleweampwyaaaab3RjTuuh4Awlidaq7GaaAb1PvFh0q9TbWwDaaaaAq1JlYXRLZcb3AqLzc3TvKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwK2.一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的8 8个中国的8个中国的8个中国的8个中国的8个中国的2个中国的2个中国的2个中国的2个中国的2个中国的2个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的2个中国的2个中国的2个中国的2个中国的2个中国的2个中国的2个中国的2个中国的2个中国的10十十十十十十十十十十十十十1cl1mlsqw3nmx9dbTvwth6ew2u5k4vh6ffkauxpzxwwbftkmg2ool3me46fv142mtcphb6wbarky9ajkiipx+mPeupVd6r3MX7q+3UIn/f7r5fZrR3g+35vjiooqeqb6fw96jfvb5eviz6fh3c5oyr+h8dbp6vmxduotmCqsiUripn8bxxxxxxxzjhjhqqqqaaaaauv5cyii=“；
变量x=0，y=0；
图像宽度=50；
图像高度=50；
var canvas=document.createElement（'canvas'）；
canvas.id=“mycanvas”；
宽度=50；
高度=50；
var context=canvas.getContext（“2d”）；
document.body.appendChild（画布）；
context.drawImage(
形象,，
x,，
Y
画布宽度，
身高，
0,
0,
图像宽度，
图像高度
);
var imageData=context.getImageData（x，y，canvas.width，canvas.height）；
var数据=imageData.data；
var-pix=0；
var text=“”；
//迭代每个像素的所有rgba值
对于（变量i=0；i

脚本应该打印此图像的

rgba

值，但所有值都是

rgba（0,0,0,0）

如果在chrome dev tools 55.0.2883.75 64位版本或firefox 50.0.2（通过示例）中复制粘贴评估部分，您将在控制台中看到和值！=

rgba（0,0,0,0）

因此，在中，我也无法获取

rgba

值。有人知道获取此rgba值并从base64图像修改这些值的另一种方法吗？如果可能的话，在香草中

---

错误报告：

找到了一个解决方法：需要在另一个

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();
});

var casper=require（“casper”）.create（）；
casper.start（）；
casper.on（'remote.message'，函数（message）{
控制台日志（消息）；
});
//首先使用evaluate（）创建图像
casper.thenEvaluate（函数（）{
//创建要复制的原始图像
//在画布中（必须执行此第一步）
var originalImg=document.createElement（'img'）；
originalImg.id='myoriginalimg'；
originalImg.src=”数据：图片/png；base64，IVBorW0KggoaaaAnsuheugaaAYCAIAACRXR/MaaacXbiwXmaaaastaaaleweampwyaaaab3RjTuuh4Awlidaq7GaaAb1PvFh0q9TbWwDaaaaAq1JlYXRLZcb3AqLzc3TvKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwKwK2.一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的8 8个中国的8个中国的8个中国的8个中国的8个中国的2个中国的2个中国的2个中国的2个中国的2个中国的2个中国的一个中国的一个中国的一个中国的一个中国的一个中国的一个中国的2个中国的2个中国的2个中国的2个中国的2个中国的2个中国的2个中国的2个中国的2个中国的10十十十十十十十十十十十十十1cl1mlsqw3nmx9dbTvwth6ew2u5k4vh6ffkauxpzxwwbftkmg2ool3me46fv142mtcphb6wbarky9ajkiipx+mPeupVd6r3MX7q+3UIn/f7r5fZrR3g+35vjiooqeqb6fw96jfvb5eviz6fh3c5oyr+h8dbp6vmxduotmCqsiUripn8bxxxxxxxzjhjhqqqqaaaaauv5cyii=“；
文件.正文.附件（原件）；
})
casper.then（函数（）{
等一下（1000）；
})
//第二个evaluate（）从图像创建画布
casper.thenEvaluate（函数（）{
//在画布中复制原始图像
var imgInInput=document.querySelector（'myoriginalimg'）；
var imageObj=新图像（）；
imageObj.src=imgInInput.getAttribute（'src'）；
var canvas=document.createElement（'canvas'）；
宽度=50；
高度=50；
var context=canvas.getContext（'2d'）；
context.drawImage(
imageObj，
0,
0,
画布宽度，
身高，
0,
0,
画布宽度，
帆布高度
);
var imageData=context.getImageData（0,0,50,50）；
var data=imageData.data；//当前图像的数据
var-pix=0；
对于（变量i=0；i