Question

当用户可以使用CSS提供的过滤器编辑图像然后稍后保存时，我正在构建Web应用程序。为了保存过滤后的图像，我必须将图像绘制到画布中，并将该图像上使用过的过滤器应用于画布本身。

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

canvas.width = img.width;
canvas.height = img.height;

canvas.style.filter = "brightness(100%) saturate(200%) contrast(130%)";
context.drawImage(im,0,0);

之前的所有说明完全正常，我必须显示画布以确保应用过滤器，并且按照他们的假设应用它们。我的问题是，当我使用以下代码下载图像时，它只下载没有任何版本的过滤器的图像。

download(canvas, 'my-image.jpg'); 
function download(canvas, filename) {
var lnk = document.createElement('a'), e;
lnk.download = filename;
lnk.href = canvas.toDataURL("data:image/jpg;base64");
if (document.createEvent) {
   e = document.createEvent("MouseEvents");
   e.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
lnk.dispatchEvent(e);
} else if (lnk.fireEvent) {
    lnk.fireEvent("onclick");
 }
}

有什么建议可以解决这个问题吗？ PS：我在macOS上，开发在Safari 11.1上运行，使用python和Flask。我尝试了context.filter = "brightness(100%) saturate(200%) contrast(130%)";，它在Chrome中运行良好，但在Safari中运行不正确。

保存时，Canvas无法正确呈现

0 个答案: