将 CSS 类应用于画布答案

【问题标题】：Applying CSS Class to Canvas将 CSS 类应用于画布
【发布时间】：2018-03-15 03:43:51
【问题描述】：

我有很多可以使用 CSS 过滤器应用于图像的 CSS 过滤器类。我的目标是使用应用于 dataURL 的过滤器来转换图像。

为此，我将图像放入画布中，然后在应用过滤器后保存图像。这是一个例子

  const img = this.img // my <img />
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')
  context.filter = 'grayscale(2)'
  context.drawImage(img, 0, 0)
  const finalImg = canvas.toDataURL()

虽然这可以很好地应用单个过滤器，但我在我的 css 类中制作了 30 多个过滤器，我想知道是否有一种方法可以将 css 类应用到画布对象。最坏的情况是我将所有过滤器转换为字符串对象数组，但我很好奇。谢谢！

画布上下文参考链接：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

【问题讨论】：

我不是专家，但你不能只使用 "canvas.addClass("yourClass");"
你为什么要把你的图片放在canvas？
@Levano 因为这就是您可以将 css 过滤器应用于图像并将其转换为数据 url 的方式。
@TimGerhard 不幸的是，画布上下文不提供这样的功能）：

标签： css html5-canvas css-filters

【解决方案1】：

您可以简单地读取getComputedStyle(canvasElement).filter 返回的值并将其用作上下文的filter。

var img=new Image();img.crossOrigin=1;img.onload=draw;
img.src="https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg";


function draw() {
 canvas.width = this.width/4; canvas.height = this.height/4;
 var ctx = canvas.getContext('2d'); 
 ctx.font = '15px sans-serif';
 ctx.fillStyle = 'white';

 for(var i=1; i<5; i++) {
  // set the class
  canvas.className = 'filter' + i;
  // retrieve the filter value
  ctx.filter = getComputedStyle(canvas).getPropertyValue('filter');
  ctx.drawImage(img, 0,0, img.width/4, img.height/4);
  ctx.filter = 'none';
  ctx.fillText('filter' + i, 20, 20);
  // export
  canvas.toBlob(saveAsIMG);
 }
 ctx.drawImage(img, 0,0, img.width/4, img.height/4);
 ctx.fillText('canvas - no filter', 20, 20);
}
function saveAsIMG(blob) {
  var img = new Image();
  img.onload = function(){URL.revokeObjectURL(img.src);};
  img.src = URL.createObjectURL(blob);
  document.body.appendChild(img);
}

.filter1 {
  filter: blur(5px);
}
.filter2 {
  filter: grayscale(60%) brightness(120%);
}
.filter3 {
  filter: invert(70%);
}
.filter4 {
  filter: none;
}

&lt;canvas id="canvas"&gt;&lt;/canvas&gt;

【讨论】：