android浏览器背景透明,javascript – 默认Android浏览器上的图像alpha

好的,我有一个

result.

首先看看你的循环：

for (var i = 0; i < numPixels; i++) { //for every pixel in the image

var index = i * 4;

index将比numPixels大3倍以上.并将获得未定义的值.平均值是NaN.但是,我解决了这个问题 – 结果是一样的.

所以我尝试对每个像素使用fillStyle和fillRect.一切都变好了.我的code：

function putImageData(ctx, imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight) {

var data = imageData.data;

var height = imageData.height;

var width = imageData.width;

dirtyX = dirtyX || 0;

dirtyY = dirtyY || 0;

dirtyWidth = dirtyWidth !== undefined ? dirtyWidth : width;

dirtyHeight = dirtyHeight !== undefined ? dirtyHeight : height;

var limitBottom = dirtyY + dirtyHeight;

var limitRight = dirtyX + dirtyWidth;

for (var y = dirtyY; y < limitBottom; y++) {

for (var x = dirtyX; x < limitRight; x++) {

var pos = y * width + x;

//adding red increased here

ctx.fillStyle = 'rgba(' + data[pos * 4 + 0] + 255 + ',' + data[pos * 4 + 1] + ',' + data[pos * 4 + 2] + ',' + (data[pos * 4 + 3] / 255) + ')';

ctx.fillRect(x + dx, y + dy, 1, 1);

}

}

};

var image = new Image();

image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gcVBAYmslkm5QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAABc0lEQVR42u2a3QrDMAiFZ9j7v7K7CpTRVtt4NCEnsJt1BP1y4l8nqvrZebXP5osACIAACIAACIAACIAACIAACIAAqpaIlPXkgpwHiIiqqtw5efa8f7csgIgTVVU5AlwGAELOSAjfLKndOWFBQyohVAHWPR/dCwEBCiDCYDSIViH5p/v87xUZZ8IUkJHGEGpoyLu/QjZomffeE+37xwthFH5aKdwNtQyOyhjT1QGzXosWaYBljMdY72laPUZZDLBq+6jTPO41xRXwGB/1Gw5ECOC6StxSASMQ2o5OQ9Jg5VxviYFI5KxgSQBXzmYNPlLaYctw72jr7ncd2DQx4KkCKud/cACeQNghvAmaCDjhCvBCOFODJX2Pgkp7gben+vR5pAqgL0aip8KI2ABNgyMRGzFiT1FARI+eWTDB3w7P6nhKHVBd5pYDGFVABsCU/wccHblLaxUNEwzACvKHB8EVFoeiBEAABEAABEAABEAABEAAe64fre4tZAeLAbcAAAAASUVORK5CYII=';

image.onload = function () {

var context = document.getElementById("mycanvas").getContext("2d"),

imageData;

context.drawImage(image, 0, 0);

imageData = context.getImageData(0, 0, 64, 64);

putImageData(context, imageData, 0, 0);

}