Chụp/lưu/xuất hình ảnh có hiệu ứng lọc CSS được áp dụng

Question

Tôi đang sử dụng công cụ chỉnh sửa hình ảnh đơn giản sử dụng hiệu ứng bộ lọc CSS3 (độ bão hòa, nâu đỏ, tương phản, v.v.)

Làm trình chỉnh sửa hình ảnh phần dễ dàng, tuy nhiên liệu có thể lưu hoặc xuất hình ảnh với các bộ lọc được áp dụng có vẻ vô cùng khó khăn không ..

Tôi đã có hy vọng cao là có thể với @niklasvh's html2canvas. Thật không may, nó không nắm bắt hầu hết các thuộc tính CSS3, hãy để một mình các hiệu ứng lọc.

Nếu ai đó có một giải pháp hoặc đáng buồn, kiến ​​thức dứt khoát rằng điều này chỉ là không thể, nó sẽ được đánh giá rất nhiều! Cảm ơn!

Answer 1

Bạn không biết rằng tôi có thể áp dụng CSS cho đồ họa trong phần tử canvas HTML5 (vì chúng không phải là một phần của DOM).

Tuy nhiên, đó là OK! Chúng tôi vẫn có thể thực hiện các hiệu ứng lọc cơ bản tương đối dễ dàng và lưu chúng dưới dạng hình ảnh chỉ với một vài dòng mã JavaScript.

Tôi đã tìm thấy một bài viết hay về cách áp dụng một sepia-like effect to the canvas and saving it as an image. Thay vì sao chép nó, tôi sẽ làm nổi bật những bản thu lớn hơn từ bài báo.

Sửa đổi hình ảnh vải:

var canvas = document.getElementById('canvasElementId'), 
    context = canvas.getContext('2d'); 

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

for (var i = 0; i < imageData.data.length; i+=4) { 
    ... 
} 

Để có được quyền truy cập vào một số API vải, bạn sẽ cần phải kích hoạt bối cảnh 2d trên vải bằng cách sử dụng trên JavaScript. MDN có một số tài liệu tuyệt vời về API có sẵn cho bạn với context object, nhưng phần quan trọng cần lưu ý ở đây là cuộc gọi getImageData(). Về cơ bản, nó sẽ lấy tất cả các giá trị pixel trong khu vực mà bạn đã xác định (trong trường hợp trên, chúng tôi đang lấy toàn bộ hình ảnh). Sau đó, với dữ liệu này trong tay, chúng ta có thể lặp qua tất cả các pixel và thay đổi chúng khi cần thiết. Trong các sepia article, nó rõ ràng là làm cho một số điều chỉnh thú vị, nhưng bạn cũng có thể làm màu xám, làm mờ, hoặc bất kỳ thay đổi khác khi cần thiết và có một tuyệt vời canvas filters library on Github cho điều đó.

Làm thế nào để lưu hình ảnh vải:

var canvas = document.getElementById('canvasElementId'), 
    image = document.createElement("img"); 

image.src = canvas.toDataURL('image/jpeg'); 

document.body.appendChild(image); 

Các kịch bản trên sẽ chọn vải của bạn (giả sử bạn đã thực hiện bản vẽ của bạn) và tạo ra một yếu tố hình ảnh. Họ sử dụng toDataURL() để tạo url mà bạn có thể sử dụng để đặt nguồn trên phần tử hình ảnh. Trong ví dụ trên, phần tử hình ảnh được thêm vào phần thân của tài liệu. Bạn có thể xem thêm thông tin trên MDN's canvas page.

Answer 2

Tôi nhận được câu trả lời của bạn. Tôi đã thực hiện chương trình này, cuối cùng nó hoạt động.

những bước là:
1. upload hình ảnh (JPG/PNG)
2. chuyển đổi sang Canvas
3. tùy chỉnh với các bộ lọc css.
4. hiển thị bằng camanJS để lưu dưới dạng hình ảnh.
5. hoàn tất.

bạn cũng có thể đặt lại giá trị hiệu ứng bằng cách sửa đổi giá trị của bộ lọc thành giá trị mặc định của bộ lọc.

chúc may mắn!