具有CSS类的img的DataURL

Question

<img>感谢CSS类,我必须应用一些样式.

是否有可能得到dataURL的<img>与CSS样式？

$(function() {
  // Original
  const imgOriginal = document.getElementById('original');
  const c1 = document.getElementById('c1');
  let ctx = c1.getContext('2d');
  ctx.drawImage(imgOriginal, 100, 100);

  // Filtered
  const imgFiltered = document.getElementById('filtered');
  const c2 = document.getElementById('c2');
  ctx = c2.getContext('2d');
  ctx.drawImage(imgFiltered, 100, 100);

  // Same dataURL :(
  console.log(c1.toDataURL(), c2.toDataURL());
  console.log(c1.toDataURL() === c2.toDataURL());
})

.filter::before {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  border: 1px solid red;
}

.filter {
  position: relative;
  -webkit-filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);
  filter: sepia(.5) hue-rotate(-30deg) saturate(1.4);
}

canvas {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div>

  <img id="original" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg/170px-Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg">
  <canvas id="c1"></canvas>

  <img id="filtered" class="filter" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg/170px-Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg">
  <canvas id="c2"></canvas>

</div>

也许片段会因为<canvas>标签而出现错误,无论如何都有想法.

---

编辑:

如果有人有其他建议SVG,我正在使用fabricJS.

---

编辑2(不解决,但找到其他方式):

1. 感谢@KavianK.你可以CSS用canvas上下文复制风格,但对我来说这很无聊,因为我们必须callback为每个CSS类存储一个不同的东西才能获得dataURL.无论如何工作!

2. 感谢@Emeeus可能是您的后端提供的解决方案,而不是我的解决方案,因为我只想在前端执行此操作.wkhtmltopdf

3. 由于@pegasuspect我们可以过滤用的图像SVG,我在下面这种方式和我更换fabricJS通过svgjs,这LIBRAIRIE可以伊斯利一个替代canvas,它是更容易的工作img,我dind't需要DataURL 了!

4. 感谢@Kaiido,有一种方法可以使用html2canvas轻松获得带有样式snapshot的HTML渲染.Unfortunataly 还不支持某些样式,或者这就是为什么它不是我的解决方案CSSdataURLCSSbox-shadowfilter

这个主题没有解决,但svgjs我不需要实际使用dataURL.

Answer 1

CSS并且DOM是用于图像和画布的位图的独立世界.位图本身不受影响CSS,只有作为位图的镜像的元素才会受到影响.因此,应用于画布的CSS滤镜不会应用于生成的图像.您需要在画布中复制过滤器,或者重新将相同的过滤器应用于生成的图像.

例:

上下文对象上有一个鲜为人知的属性,方便地命名为filter.这将对其自身的上下文应用过滤器.必须在下次绘制操作之前设置过滤器.

var img = new Image();

img.crossOrigin = '';
img.src = document.getElementById( 'original' ).src;

img.onload = function() {
    var canvas = document.getElementById( 'canvas' ),
        ctx = canvas.getContext( '2d' );

    canvas.width = this.width;
    canvas.height = this.height;

    // filter
    if ( typeof ctx.filter !== 'undefined' ) {
        ctx.filter = "sepia(.5) hue-rotate(-30deg) saturate(1.4)";
        ctx.drawImage(this, 0, 0);
    } else {
        ctx.drawImage(this, 0, 0);
    }

    document.getElementById( 'filtered' ).src = canvas.toDataURL();
}

<img id="original" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg/170px-Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg" />
<img id="filtered" />
<canvas id="canvas" style="display: none"></canvas>