Javascript 默认Android浏览器上的图像alpha

我正试着把一个图像复制下来，然后贴在画布上

适用于桌面浏览器：

• 铬
• 火狐
• 狩猎
• Internet Explorer

在移动浏览器中失败：

• 安卓

，此示例在Chrome中工作，但在Android的默认浏览器中失败

代码是：

<style>
    body {
        background-color: gray;
    }
</style>

<canvas id="mycanvas" width="64" height="64"></canvas>

<script>
    var image = new Image();
    image.src = 'image.png';

    image.onload = function () { //once the image finishes loading
        var context = document.getElementById("mycanvas").getContext("2d");

        context.drawImage(image, 0, 0);

        var imageData = context.getImageData(0, 0, 64, 64);
        var pixels = imageData.data;
        var numPixels = pixels.length;

        for (var i = 0; i < numPixels; i++) { //for every pixel in the image
            var index = i * 4;
            var average = (pixels[index] + pixels[index + 1] + pixels[index + 2]) / 3;

            pixels[index] = average + 255; //red is increased
            pixels[index + 1] = average; //green
            pixels[index + 2] = average; //blue
            //pixels[index + 3] = pixels[index + 3]; //no changes to alpha
        }

        context.clearRect(0, 0, 64, 64); //clear the image
        context.putImageData(imageData, 0, 0); //places the modified image instead
    }
</script>

身体{
背景颜色：灰色；
}
var image=新图像（）；
image.src='image.png'；
image.onload=函数（）{//一旦图像完成加载
var context=document.getElementById（“mycanvas”）.getContext（“2d”）；
drawImage（image，0,0）；
var imageData=context.getImageData（0,0,64,64）；
var像素=imageData.data；
var numPixels=pixels.length；
对于（var i=0；i

总结如下：

• 将背景颜色设置为灰色，以便更容易观察alpha
• 创建一个64乘64的画布
• 在透明背景上加载笑脸的图像
• 将图像绘制到画布上
• 获取图像的数据
• 对于每个像素，使红色变强
• 在画布上替换已更改的图像

笑脸看起来像这样（引用方框，以便您可以看出它是透明的）：

然而，与chrome和android浏览器相比

android绘图的背景是红色，而chrome绘图是完全透明的

所以

• 这里发生了什么事
• 如何更改代码，使android绘图与chrome绘图匹配

注意：如果（像素[index+3]==0）继续，我已经尝试了

，我知道这一点，但它不适用于具有不同不透明度的图像
 好的，我有一个问题

首先看看你的循环：

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

您是否已将png保存为24格式？@romaneso不，它是32位RGBA。考虑到RGBA，我甚至不认为24位RGBA是可能的。哦，那是正确的。把它当作gif试试maybe@Thouartamazing它还必须在Web服务器上运行，生成一个
.html
文件并直接使用chrome运行它是不起作用的。它也应该在Web服务器上，这样你就可以用android设备测试它了。可能与这个问题有关？我接受了+bounty，因为它本质上不是代码的问题，而是android浏览器使用的JavaScript实现的问题。通过使用fillRect，速度要慢得多，但至少是将相同效果应用于图像的有效方法。
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);
}