HTML-холст, используйте серое изображение в качестве маски

Я пытаюсь применить маску, как она работает в Photoshop. Черный прозрачен, белый виден. Тем не менее, композитные режимы не позволяют этого, я думаю.

Я могу только найти режимы, где он использует альфа-канал, но я хотел бы использовать JPG для меньшего размера файла...

Источник

2 ответа

Решение

Используйте getImageData и putImageData для доступа к необработанным данным пикселей

Вам нужно вручную переместить пиксели.

Для этого загрузите изображение, поместите его на холст, получите пиксели холста. Преобразовать в оттенки серого и перейти к альфа. Затем поместите пиксели обратно на холст.

var mask;
var image = new Image;
image.src = "image name.jpg";
image.onload = function(){
    var canvas = document.createElement("canvas");
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(this,0,0);
    var data = ctx.getImageData(0,0,this.width,this.height);
    var i = 0;
    while(i < data.data.length){
        var rgb = data.data[i++] + data.data[i++] + data.data[i++];
        data.data[i ++]  = rgb / 3;
    }
    ctx.putImageData(data,0,0);
    mask = canvas;
}

После того, как загруженная маска является копией изображения, альфа-канал содержит среднее значение каналов RGB.

Использовать его

// ctx is the canvas context you want to draw to with the mask

if(mask){
     ctx.globalCompositeOperation = "destination-out";
     ctx.drawImage(mask,0,0);
     ctx.globalCompositeOperation = "source-over";
}
Источник

Я пытался запустить ваш код, но, к сожалению, он не работал должным образом.

Мне тоже хотелось бы это решение. Кто-нибудь может это исправить?

Источник
Другие вопросы по тегам