Bài viết đã cũ cho đến nay tôi sẽ đi với đề xuất của tôi. Đề xuất dựa trên thao tác pixel trong bối cảnh canvas 2d. Từ MDN:
Bạn có thể trực tiếp thao tác dữ liệu pixel trong khung vẽ ở mức byte
Để thao tác với pixel, chúng tôi sẽ sử dụng hai hàm tại đây - getImageData và putImageData
Sử dụng chức năng getImageData:
var myImageData = bối cảnh.getImageData (trái, trên cùng, chiều rộng, chiều cao);
và cú pháp putImageData:
bối cảnh.putImageData (myImageData, dx, dy); // dx, dy - x và y offset trên khung vẽ của bạn
Trường hợp bối cảnh là bối cảnh 2d canvas của bạn
Vì vậy, để có được giá trị alpha và xanh lục đỏ, chúng tôi sẽ làm như sau:
var r = imageData.data[((x*(imageData.width*4)) + (y*4))];
var g = imageData.data[((x*(imageData.width*4)) + (y*4)) + 1];
var b = imageData.data[((x*(imageData.width*4)) + (y*4)) + 2];
var a = imageData.data[((x*(imageData.width*4)) + (y*4)) + 3];
Trong đó x là x offset, y là y offset trên canvas
Vì vậy, chúng tôi có mã làm cho hình ảnh trong suốt một nửa
var canvas = document.getElementById('myCanvas');
var c = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
c.drawImage(img, 0, 0);
var ImageData = c.getImageData(0,0,img.width,img.height);
for(var i=0;i<img.height;i++)
for(var j=0;j<img.width;j++)
ImageData.data[((i*(img.width*4)) + (j*4) + 3)] = 127;//opacity = 0.5 [0-255]
c.putImageData(ImageData,0,0);//put image data back
}
img.src = 'image.jpg';
Bạn có thể khiến bạn sở hữu "shader" - xem toàn bộ bài viết MDN tại đây