具有CSS类的img的DataURL [英] DataURL of an img with CSS class

问题描述

由于CSS类，我必须在< img> 上应用一些样式。

I have to apply some styles on <img> thanks to a CSS class.

是吗？可以使用CSS样式获取< img> 的 dataURL ？

Is it possible to get the dataURL of the <img> with the CSS style ?

$(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> 标签，也许代码片段会出现错误，无论如何都有想法。

Maybe snippet is going to have a bug because of the <canvas> tag, the idea is there anyway.

编辑：

如果有人对<建议 SVG 或其他，我正在使用 fabricJS 。

If anyone has a suggestion with SVG or something else, I'm using fabricJS.

编辑2（不解析，但发现其他方式）：

1. 感谢@KavianK。您可以使用 canvas 上下文复制 CSS 样式，但对我来说这很无聊因为我们必须存储不同的 callback 为每个 CSS 类获取 dataURL 。无论如何工作！

1. Thanks to @KavianK. you could replicate CSS style with the canvas context, however to me it's boring because we have to store a different callback for each CSS class to get the dataURL. Working anyway!

感谢@Emeeus可能是你后端提供的解决方案，而不是我的解决方案，因为我只想在前面做这个 - 结束。 wkhtmltopdf

Thanks to @Emeeus maybe a solution provide from your backend, not solution for me beacause i'm want to do this ONLY on the front-end. wkhtmltopdf

感谢@pegasuspect，我们可以使用 SVG 过滤图像，我正在按照这种方式，我更换 fabricJS 通过 svgjs ，这个librairie可以轻松替换 canvas 使用 img 更容易，我再也不需要 DataURL 了！

Thanks to @pegasuspect we can filter an image with SVG, I'm following this way and I replace fabricJS by svgjs, this librairie can replace easly a canvas and it's more easier to work with img and I dind't need the DataURL anymore !

感谢@Kaiido有一种方法可以获取 HTML的快照 使用 html2canvas <使用 CSS 样式呈现/ a>在这种情况下很容易获得 dataURL 。 Unfortunataly还支持一些 CSS 样式，例如 box-shadow 或过滤器这就是为什么它不是我的解决方案

Thanks to @Kaiido there is a way to take a snapshot of your HTML rendered with CSS style with html2canvas easy to get dataURL with this case. Unfortunataly some CSS styles are not supported yet like box-shadow or filter that's why it's not a solution for me

此主题无法解决，但 svgjs 我不需要实际使用 dataURL 。

This topic is not resolve but with svgjs I don't need actually work with dataURL.

推荐答案

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

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. So, CSS filters applied to the canvas will not be applied to the image that is produced. You either need to replicate the filters in canvas or rather re apply the same filters to the generated image.

示例：

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

There is a little known property on the context object, conveniently named filter. This will apply a filter on the context it self. The filter must be set before next draw operation.

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>

这篇关于具有CSS类的img的DataURL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！