Chế độ hòa trộn Photoshop-esque trong các trang web sử dụng CSS hoặc JavaScript?

Question

Tôi tự hỏi liệu có thể kết hợp hai hoặc nhiều hình ảnh lại với nhau trên một trang web sử dụng các chế độ hòa trộn như bạn sẽ tìm thấy trong photoshop (lớp phủ, màn hình, làm sáng, vv).

Tôi biết rằng điều này có thể xảy ra với flash và java, nhưng có thể không có bất kỳ plugin nào tức là với CSS hoặc JavaScript không? Tôi đã thấy một vài ví dụ javascript về hiệu ứng này hoạt động trên hình ảnh tương đối nhỏ, nhưng tôi quan tâm đến việc thực hiện điều này trên hình ảnh có độ phân giải cao ... điều này hoàn toàn là cho mục đích thử nghiệm.

Answer 1

Với phần tử canvas, bạn có thể lấy lớp phủ và làm sáng khá dễ dàng. Đó là tất cả về những cài đặt bạn chỉ định trước khi hiển thị từng bitmap vào canvas.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

Answer 2

tôi đã tạo ra một, nhẹ, thư viện mã nguồn mở riêng cho thực hiện các chế độ pha trộn Photoshop theo phong cách từ bối cảnh Canvas một HTML khác: context-blender. Dưới đây là cách sử dụng mẫu:

// Might be an 'offscreen' canvas 
var over = someCanvas.getContext('2d'); 
var under = anotherCanvas.getContext('2d'); 

over.blendOnto(under, 'screen', {destX:30,destY:15}); 

Xem README để biết thêm thông tin, bao gồm chế độ hòa trộn được hỗ trợ trong phiên bản hiện tại.