捕获/保存/导出应用了CSS滤镜效果的图像 [英] Capture/save/export an image with CSS filter effects applied

问题描述

我使用CSS3滤镜效果（饱和度，深棕色，对比度等）制作一个简单的图片编辑器。

很容易的部分，但是无论是否可能保存或导出图像与过滤器应用似乎难以置信的困难..

我原本希望这将是可能的< a href =https://github.com/niklasvh/html2canvas =noreferrer> @ niklasvh的html2canvas 。不幸的是，它不能捕获大多数CSS3属性，更不用说过滤效果。

如果任何人有解决方案或悲伤，绝对知道这是不可能的，会非常感谢！谢谢！

解决方案

你不知道，我知道，能够在HTML5 canvas元素中应用CSS （因为它们不是DOM的一部分）。

但是，这没关系！我们仍然可以做基本的过滤器效果比较容易，并保存为一个图像与只有几行JavaScript。

我发现了一个好的文章， a href =http://www.script-tutorials.com/html5-image-effects-sepia/ =noreferrer>棕褐色效果到画布并将其另存为图片。

修改画布图片：

  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）{
 ... 
} 
  

为了访问一些canvas API，您需要使用上述JavaScript在画布上激活2d上下文。 MDN有一些很棒的API文档，您可以使用上下文对象，但这里要注意的重要部分是 getImageData（）调用。基本上，它会抓住你定义的区域中的所有像素值（在上面的情况下，我们抓住整个图像）。然后，使用这些数据，我们可以遍历所有像素，并根据需要更改它们。在棕褐色文章中，显然需要进行一些有趣的调整，但您也可以根据需要进行灰度，模糊处理或其他任何更改，并且有一个非常棒的 Github上的画布过滤器库

如何保存画布图片：

var canvas = document.getElementById（'canvasElementId'），
image = document.createElement（img）;

image.src = canvas.toDataURL（'image / jpeg'）;

document.body.appendChild（image）;


上述脚本将选择您的画布（假设您已经完成了绘图）元件。它们使用 toDataURL（）生成一个url，您可以使用它来设置图像元素上的源。在上面的示例中，图像元素附加到文档正文。您可以在 MDN的画布页上查看更多信息。 a>。

I'm tooling around to make a simple picture editor that uses CSS3 filter effects (saturation, sepia, contrast, etc.)

Making the picture editor is the easy part, however whether it is possible to save or export the image with the filters applied seems incredibly difficult..

I had originally had high hopes it would be possible with @niklasvh's html2canvas. Unfortunately, it doesn't capture most CSS3 properties, let alone filter effects.

If anybody has a solution or sadly, definitive knowledge that this just isn't possible, it would be greatly appreciated! Thanks!

解决方案

You're not, that I'm aware of, able to apply CSS to graphics in the HTML5 canvas element (as they're not a part of the DOM).

However, that's OK! We can still do basic filter effects relatively easy and save them out as an image with just a few lines of JavaScript.

I found a good article that goes over applying a sepia-like effect to the canvas and saving it as an image. Rather than copying it, I'll highlight the larger takeaways from the article.

Modifying the canvas image:

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) {
    ...
}

In order to get access to some canvas API, you'll need to activate the 2d context on the canvas using the above JavaScript. MDN has some great documentation on the API that is available to you with the context object, but the important part to note here is the getImageData() call. Basically, it will grab all the pixel values in the area that you defined (in the case above, we're grabbing the whole image). Then, with this data in hand, we can iterate through all the pixels and change them as needed. In the sepia article, it's obviously making some interesting adjustments, but you can also do grayscale, blurring, or any other changes as necessary and there's an awesome canvas filters library on Github for just that.

How to save the canvas image:

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

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

document.body.appendChild(image);

The above script will select your canvas (assuming you've already done your drawings) and create an image element. It them uses toDataURL() to generate a url that you can use to set the source on an image element. In the example above, the image element is appended to the document body. You can view more info on MDN's canvas page.

这篇关于捕获/保存/导出应用了CSS滤镜效果的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！