Question

如何将图像模式设置为图像标签中的图像。我已经使用下面的代码找到了更改图像颜色，但我想在图像上绘制perticuler模式（例如Checks，strip，dotted等）。我想要解决上述问题，提前致谢

function colorImage(imgId,hexaColor) {
    // create hidden canvas (using image dimensions)
    var imgElement = document.getElementById(imgId);

    var canvas = document.createElement("canvas");
    canvas.width = imgElement.width;
    canvas.height = imgElement.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElement,0,0);

    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);

    var data = imageData.data;

    // convert image to grayscale
    var rgbColor = hexToRgb(hexaColor);

    for(var p = 0, len = data.length; p < len; p+=4) {
        //if(data[p+3] == 0)
        //   continue;
        data[p + 0] = rgbColor.r;
        data[p + 1] = rgbColor.g;
        data[p + 2] = rgbColor.b;
        //data[p + 3] = 255;
    }
    ctx.putImageData(imageData, 0, 0);

    // replace image source with canvas data
    imgElement.src = canvas.toDataURL();
}

Answer 1

你会想要修改绘图的循环，例如这应该产生一些条纹：

for(var p = 0, len = data.length; p < len; p+=4) {
    if ( (p % 8) == 0 ) {
       data[p + 0] = 0;
       data[p + 1] = 0;
       data[p + 2] = 0;
    } else {
       data[p + 0] = 255;
       data[p + 1] = 255;
       data[p + 2] = 255;
    }
}

否则，您将需要获取具有部分图案的图像并将其平铺为：

BitmapDrawable bitmapDrawable  = new BitmapDrawable(getResources(),BitmapFactory.decodeResource(getResources(), R.drawable.tile_image));
bitmapDrawable.setTileModeX(TileMode.REPEAT);
imageView.setImageDrawable(bitmapDrawable);

如何将图像模式设置为图像标记中的图像

1 个答案: