如何使用CSS过滤器从画布中保存图像 [英] How to save image from canvas with css filters

问题描述

每个人！我有个问题。我需要保存图像后使用css过滤器无后端。我所做的：

Everybody! I have a problem. I need to save image after using css filters WITHOUT backend. What I do:

1. 使用css过滤器


2. 转换为画布


3. 保存为var data = myCanvas.toDataURL（image / png）;


4. 哭泣。

1. Use css filters
2. Convert to canvas
3. Save like var data = myCanvas.toDataURL("image/png");
4. Crying. Image was save without effects.

Index.html

Index.html

<div class="large-7 left">
    <img id="image1" src="./img/lusy-portret-ochki-makiyazh.jpg"/><br>
    <canvas id="myCanvas"></canvas>
</div>

Photo.js

Photo.js

var buttonSave = function() {
    var myCanvas = document.getElementById("myCanvas");
    var img = document.getElementById('image1');
    var ctx = myCanvas.getContext ? myCanvas.getContext('2d') : null; 
    ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);
        var grayValue = localStorage.getItem('grayValue');
        var blurValue = localStorage.getItem('blurValue');
        var brightnessValue = localStorage.getItem('brightnessValue');
        var saturateValue = localStorage.getItem('saturateValue');
        var contrastValue = localStorage.getItem('contrastValue');
        var sepiaValue = localStorage.getItem('sepiaValue');

        filterVal = "grayscale("+ grayValue +"%)" + " " + "blur("+ blurValue +"px)" + " " + "brightness("+brightnessValue+"%)" + " " + "saturate(" + saturateValue +"%)" + " " + "contrast(" + contrastValue + "%)" + " " + "sepia(" + sepiaValue + "%)" ;
        $('#myCanvas')
          .css('filter',filterVal)
          .css('webkitFilter',filterVal)
          .css('mozFilter',filterVal)
          .css('oFilter',filterVal)
          .css('msFilter',filterVal);

    var data = myCanvas.toDataURL("image/png");
    localStorage.setItem("elephant", data);
    if (!window.open(data)) {
        document.location.href = data;
    }

}

任何过滤器。

推荐答案

有一个小的属性，方便地命名为 filter 。

There is a little known property on the context object, conveniently named filter.

这可以使用CSS过滤器作为参数，并将其应用于位图。但是，这不是官方标准的一部分，它只能在Firefox中使用，因此存在限制。

This can take a CSS filter as argument and apply it to the bitmap. However, this is not part of the official standard and it only works in Firefox so there is the limitation.

您可以检查是否存在并使用CSS过滤器（如果有），或者使用后备工具将过滤器手动应用到图片（如果没有）。唯一的好处是真正的性能。

You can check for the existence of this property and use CSS filters if it does, or use a fallback to manually apply the filters to the image if not. The only advantage is really performance when available.

CSS和DOM是一个独立的世界，用于图像和画布的位图。位图本身不受CSS的影响，只有作为位图的镜像的元素。唯一的方法是使用像素级别（当上下文的过滤器属性不可用时）。

CSS and DOM is a separate world from the bitmaps that are used for images and canvas. The bitmaps themselves are not affected by CSS, only the elements which acts as a looking-glass to the bitmap. The only way is to work with at pixel levels (when context's filter property is not available).

如何计算各种过滤器可在过滤器效果模块级别1 中找到。另请参阅 SVG过滤器和 Color Matrix 。

How to calculate the various filters can be found in the Filter Effects Module Level 1. Also see SVG Filters and Color Matrix.

这将对上下文应用一个过滤器。如果filter属性不存在，则必须提供回退（此处未显示）。然后提取带有应用过滤器的图像作为图像（右侧的版本）。

This will apply a filter on the context it self. If the filter property does not exist a fallback must be supplied (not shown here). It then extracts the image with applied filter as an image (version to the right). The filter must be set before next draw operation.

var img = new Image();
img.crossOrigin = ""; 
img.onload = draw; img.src = "http://i.imgur.com/WblO1jx.jpg";

function  draw() {
  var canvas = document.querySelector("canvas"),
      ctx = canvas.getContext("2d");

  canvas.width = this.width;
  canvas.height = this.height;
  
  // filter
  if (typeof ctx.filter !== "undefined") {
    ctx.filter = "sepia(0.8)";
    ctx.drawImage(this, 0, 0);
  }
  else {
    ctx.drawImage(this, 0, 0);
    // TODO: manually apply filter here.
  }

  document.querySelector("img").src = canvas.toDataURL();
}

canvas, img {width:300px;height:auto}

<canvas></canvas><img>

这篇关于如何使用CSS过滤器从画布中保存图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！