Question

我有一个项目，我在其中录制带过滤器的视频（类似于Instagram）。有一刻，我收到了制作快照功能的任务。所以，我决定编写下一个算法：创建<canvas> - ＆gt;得到它的＆＃39;上下文 - ＆gt;应用选择的过滤器 - ＆gt;绘制过滤图像。这是它的代码：

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

canvas.width = cameraView.videoWidth;
canvas.height = cameraView.videoHeight;

context.filter = window.getComputedStyle(cameraView, null).filter || window.getComputedStyle(cameraView, null).webkitFilter;
context.webkitFilter = context.filter;

context.drawImage(cameraView, 0, 0, canvas.width, canvas.height);
let src = canvas.toDataURL();

然后，我尝试了三种方法将其保存在桌面上：

1

let img = new Image;
img.width = canvas.width;
img.height = canvas.height;
img.crossOrigin = 'Anonymous';
img.src = src;

2

let link = document.createElement('a');
link.setAttribute('href', src);
link.setAttribute('download', 'blablabla.png');
link.click();

3

document.location.href = src.replace('image/png', 'image/octet-stream');

第二种方法根本不起作用，另外两种方法在控制台中给了我Security error: operation is insecure。所以，我已经读过，问题出在头文件和CORS中。然后，我在本地计算机上设置了一个Apache服务器，创建了.htaccess，并向其Header add Access-Control-Allow-Origin "*"回显。但安全错误仍然存在。此外，在项目开始时，我已经使用了Node.js Express服务器并试图从那里发送标题，但它也没有为我工作。

此外，还有其他解决方案，html2canvas，但我更喜欢使用普通的js而不是使用额外的库。

UPD：如果我删除代码，我将过滤器应用于上下文，一切正常。我知道它是由于对模糊图像加载的限制造成的，但仍然希望我可以解决这个问题。

尝试将画布数据转换为图像

0 个答案: