javascript – 默认Android浏览器上的图像alpha

我试图将图像变成双色并将其贴在画布上.

适用于桌面浏览器：

> Chrome
> Firefox
> Safari
> Internet Explorer

移动浏览器失败：

Workable demo on JSFiddle,此示例适用于Chrome,但在Android的默认浏览器中失败.


摘要是：
>将背景颜色设置为灰色,以便更容易观察到alpha
>创建64乘64的画布
>在透明背景上加载笑脸图像
>将图像绘制到画布上
>获取图像的数据
>对于每个像素,使红色更强
>替换画布上的更改图像
笑脸看起来像这样(块引用,所以你可以告诉它是透明的)：




但是,与chrome和android浏览器相比,




android绘图的背景是红色的,而chrome绘图是完全透明的.
所以…
>这里发生了什么？
>如何更改代码以使android绘图与chrome绘图匹配？
注意：我已经尝试过if(像素[索引3] == 0)继续;并且我知道这一点,但它不适用于具有不同不透明度的图像.


最佳答案
好的,我有一个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);
    imageData = context.getImageData(0,64);

    putImageData(context,0);
}


 原文链接：https://www.f2er.com/android/431109.html

javascript – 默认Android浏览器上的图像alpha

猜你在找的Android相关文章