Question

我有很多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类应用于canvas对象的方法。最糟糕的情况是我将所有过滤器转换为字符串对象数组，但我非常好奇。谢谢！

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

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

<canvas id="canvas"></canvas>

将CSS类应用于Canvas

1 个答案: