javascript - 如何使用 CSS 过滤器从 Canvas 中保存图像

Question

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

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

Index.html

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

照片.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;
    }

}

但是，这会生成没有任何滤镜的图像。

Answer 1

还有一个鲜为人知的property在上下文对象上，方便地命名为 filter。

这可以将 CSS 滤镜作为参数并将其应用于位图。 但是，这不是官方标准的一部分，它只能在 Firefox 中运行，因此存在局限性。。自从这个答案最初写成以来，这已成为 official standard 的一部分。 .

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

CSS 和 DOM 与用于图像和 Canvas 的位图是一个独立的世界。位图本身不受 CSS 影响，只有充当位图镜子的元素才会受到影响。唯一的方法是在像素级别使用(当context 的过滤器属性不可用时)。

如何计算各种过滤器可以在Filter Effects Module Level 1中找到.另见 SVG Filters和 Color Matrix .

例子

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

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>