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

问题描述

我需要在客户端使用 CSS 过滤器后保存图像(不使用后端).到目前为止我所拥有的:

1. 使用 CSS 过滤器
2. 转换为画布
3. 使用 var data = myCanvas.toDataURL("image/png");
保存
4. 哭了.图片保存时没有效果.

索引.html

<img id="image1" src="./img/lusy-portret-ochki-makiyazh.jpg"/><br><canvas id="myCanvas"></canvas>

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 = "灰度("+ grayValue +"%)" + " " + "blur("+ blurValue +"px)" + " " + "brightness("+brightnessValue+"%)" + " " + "saturate("+ saturateValue +"%)" + " " + "contrast(" + contrastValue + "%)" + " " + "sepia(" + sepiaValue + "%)" ;$('#myCanvas').css('过滤器',filterVal).css('webkitFilter',filterVal).css('mozFilter',filterVal).css('oFilter',filterVal).css('msFilter',filterVal);var data = myCanvas.toDataURL("image/png");localStorage.setItem("大象", 数据);如果(！window.open(数据)){document.location.href = 数据；}}

然而，这会产生一个没有任何过滤器的图像.

解决方案

有一个鲜为人知的属性在上下文对象上，方便地命名为filter.

这可以将 CSS 过滤器作为参数并将其应用于位图.但是，这不是官方标准的一部分，它只适用于 Firefox，因此存在限制..这已经因为这个答案最初是写成为官方标准的一部分.

您可以检查此属性是否存在，如果存在，则使用 CSS 过滤器，如果不存在，则使用回退手动将过滤器应用于图像.唯一的优势是可用时的真正性能.

CSS 和 DOM 与用于图像和画布的位图不同.位图本身不受 CSS 影响，只有充当位图镜子的元素.唯一的方法是在像素级别使用(当 context 的过滤器属性不可用时).

如何计算各种过滤器可以在过滤器效果模块级别1中找到.另请参阅 SVG 过滤器 和 颜色矩阵.

示例

这将对其自身的上下文应用过滤器.如果过滤器属性不存在，则必须提供回退(此处未显示).然后将应用过滤器的图像提取为图像(右侧的版本).过滤器必须在下一次绘制操作之前设置.

var img = new Image();img.crossOrigin = "";img.onload = 绘制；img.src = "//i.imgur.com/WblO1jx.jpg";函数绘制(){var canvas = document.querySelector("canvas"),ctx = canvas.getContext("2d");canvas.width = this.width;canvas.height = this.height;//筛选if (typeof ctx.filter !== "undefined") {ctx.filter = "sepia(0.8)";ctx.drawImage(this, 0, 0);}别的 {ctx.drawImage(this, 0, 0);//TODO:在此处手动应用过滤器.}document.querySelector("img").src = canvas.toDataURL();}

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

<canvas></canvas><img>

I need to save an image after using CSS filters on the client-side (without using a backend). What I have so far:

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

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

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;
    }

}

However, this produces an image without any filters.

解决方案

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

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.. This has since this answer was originally written become a part of the official standard.

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

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

Example

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 = "//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屋！