是任何人解决关于保存过滤的帆布作为图像？ [英] is anyone solve about saving filtered canvas as an image?

问题描述

如果我的问题是重复的，真的很抱歉。

Really sorry if my question is a duplicate one.

基于此问题捕获/保存/导出应用了CSS滤镜效果的图片
，并从该链接提出之前，仍然没有想法来解决问题。因为Im在画布中使用了许多滤镜效果（如hueRotate，亮度，棕褐色，模糊，对比度等）。

based on this problem Capture/save/export an image with CSS filter effects applied and from that link was asked before, still no idea to solve the problem. because Im using many filter effect in a canvas (like hueRotate, brightness, sepia, blur, contrast, etc).

是任何人都知道如何使用css过滤器应用？
从这个问题的关键是如何putImageData从过滤器层到画布。

is anyone know how to save an image with css filter applied? the key from this problem is how to putImageData from filter layer into canvas.

我试过很多次，它没有应用过滤器。
我也从任何网站和书籍搜索，仍然不知道如何解决这个问题。

I've tried many times and it come with no filter applied. I've also searching from any website and books, still have no idea to solve this.

所以，有人解决这个问题吗？

so, is anyone solve this problem?

（对不起我的英语，这个问题是我最后的任务，所以我会真的很感激，如果你们可以帮助我。）

(sorry for my bad english, this problem is my final task, so I will really appreciate if you guys can help me.)

推荐答案

有一个相当简单的解决方案。

There's a fairly easy solution.

您需要更改画布像素以反映所需的过滤器，然后将画布另存为图片。

You need to change the canvas pixels to reflect your desired filter and then save the canvas as an image.

1. 使用 drawImage 在画布上绘制原始图像。请确保您满足跨域安全限制，否则画布将被污染，您将无法使用应用过滤器所需的画布方法。


2. 获取RGBA像素数据使用 getImageData 在画布上的所有像素。


3. 通过修改步骤＃2的画布像素数据，应用所需的过滤器。这里有一个相关的以前的Stackoverflow问答： HTML5 Canvas blending& IE / Edge


4. 使用 putImageData 将经过滤镜修改的像素重新放到画布上。


5. 使用 toDataURL 将画布转换为图像。注意：Chrome和Foxfire允许用户在其画布上下文菜单中直接将画布保存为右键单击保存为图片的图片。

1. Draw the original image on the canvas with drawImage. Be sure you satisify cross-domain security restrictions, otherwise the canvas will be tainted and you will not be able to use the canvas methods required to apply the filter.
2. Fetch the RGBA pixel data for all pixels on the canvas using getImageData.
3. Apply your desired filter by modifying the canvas pixel data from step#2. Here's a relevant previous Stackoverflow Q&A: HTML5 Canvas blending & IE / Edge
4. Put the filter-modified pixels back onto the canvas using putImageData.
5. Convert the canvas to an image using toDataURL. Note: Chrome and Foxfire allow the user to directly save the canvas as an image with right-click-save-as-image on their canvas context menu.

这篇关于是任何人解决关于保存过滤的帆布作为图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！