在带有过滤器的画布中打印错误

Print error in canvas with filters

本文关键字：布中 打印 错误 过滤器      更新时间：2023-09-26

我有一个带有滤镜的画布元素，我想打印这个画布，但是当我尝试打印时，打印没有滤镜效果。

HTML: 

<div class="container">
    <canvas id="outCanvas" width="300" height="200" style="position: absolute;">
    </canvas>
    <canvas id="print" width="300" height="200" style="position: absolute; left: 300px;">
    </canvas>
</div>

JS: 

// canvas for video frame
var outCanvas = document.getElementById('outCanvas');
var outCtx = outCanvas.getContext('2d');
var print = document.getElementById('print');
var printCtx = print.getContext('2d');
var image = new Image();
image.onload = function() {
    outCtx.drawImage(image, 0, 0, 300, 200);
    printCtx.drawImage(outCanvas, 0, 0, 300, 200);
}
image.src = 'http://www.beach-therapy.com/images/Arubabeach.jpg';
var filter = 'grayscale(100%) sepia(0%) contrast(130%) brightness(110%)';
$(outCanvas)
    .css('filter', filter)
    .css('-webkit-filter', filter);

修改示例

有人知道为什么会这样吗?

这是因为您没有为printdiv添加过滤器。您只为outCanvasdiv添加了过滤器。

$(print)
    .css('filter', filter)
    .css('-webkit-filter', filter);

现在它工作了。查看演示

希望有帮助!

相关文章：