我必须应用一些样式<img>感谢 CSS 类。
是否有可能获得dataURL of the <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>标签，无论如何，这个想法是存在的。
EDIT :
如果有人有建议SVG或其他东西，我正在使用fabricJS http://fabricjs.com/.
编辑2（不解决而是寻找其他方法） :
-
感谢@KavianK。你可以复制CSS风格与canvas上下文，但是对我来说这很无聊，因为我们必须存储不同的callback对于每个CSS类以获得dataURL。无论如何工作！
-
感谢@Emeeus，也许您的后端提供了一个解决方案，而不是我的解决方案，因为我只想在前端执行此操作。wkhtml转pdf https://wkhtmltopdf.org/
-
感谢@pegasuspect，我们可以使用以下命令过滤图像SVG，我按照这种方式替换fabricJS http://fabricjs.com/ by svgjs https://svgjs.dev/，这个库可以轻松取代canvas并且更容易合作img我不需要DataURL不再了！
-
感谢@Kaiido，有一种方法可以采取snapshot你的HTML渲染为CSS风格与html2canvas https://github.com/niklasvh/html2canvas/容易取得dataURL与此案。不幸的是有些CSS尚不支持样式，例如box-shadow or filter这就是为什么这对我来说不是一个解决方案
该主题尚未解决，但与svgjs我实际上不需要与dataURL.
CSS and DOM是与用于图像和画布的位图分开的世界。位图本身不受CSS，仅充当位图镜子的元素。因此，应用于画布的 CSS 过滤器不会应用于生成的图像。您要么需要在画布中复制滤镜，要么需要将相同的滤镜重新应用到生成的图像。
Example:
上下文对象有一个鲜为人知的属性，方便命名filter https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
