用JavaScript保存图像

Question

我有一个HTML页面，从设备相机获取视频供稿。 我将其绘制到具有setTimeOut循环的画布上，并为图像拍摄图片。 然后，将过滤器应用于该图像（棕褐色，灰度...）并保存。 图像不带过滤器保存。 为什么不保存过滤的图像，而是保存“原始”图像？ 我不太擅长Javascript，所以请保持柔和。

<video id = "video" autoplay></video>
<button onclick = "snap()">Snap</button>
<canvas id = "canvas" width = "400" height = "300"></canvas>
<img id = "photo" src = "pic.png" alt = "Photo">
<button onclick = "save()">Save</button>
<button onclick = "sepia()">Sepia</button>//Added in edit
//--------------
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var photo = document.getElementById('photo');

navigator.getMedia({ video: true, audio: false }, success, failure);
function success(stream) {
    video.src = vendorUrl.createObjectURL(stream);
}
function failure(error) {}

video.addEventListener('play', sendToCanvas, false);
function sendToCanvas() {
    draw(this, context, canvas.width, canvas.height);
}
function draw(video, context, width, height) {
    context.drawImage(video, 0, 0, width, height); 
    setTimeout(draw, 10, video, context, width, height); 
}
function snap() {
    photo.setAttribute('src', canvas.toDataURL("image/png"));
}
function save() {
    var currentdate = new Date().toLocaleString();
    var link = document.createElement('a');
    link.download = currentdate + ".png";
    link.href = photo.src;
    link.click();
}
function sepia() {//Added in edit
    photo.style["-webkit-filter"] = "sepia(100%)";
}

Answer 1

您正在使用CSS过滤器，它实际上并没有绘制到画布中，而只是页面上的装饰。

因此，canvas的提取其内容的方法将不会保留这些过滤器。

这就像如果您确实在画布元素上设置背景颜色而不绘制任何内容或某些边框，则一旦使用toDataURL方法就不会获得这些样式，只有在画布上下文本身上绘制的图是画布的内容：

 var ctx = c.getContext('2d'); //only this black rectangle is drawn onto the canvas ctx.fillRect(10,10,20,20); expImg.src = c.toDataURL(); 

 /* these styles are only applied on the document, not onto the canvas itself */ canvas{ background-color: lightgreen; border: 10px solid red; } img{ border: 1px solid green; } 

 <canvas id="c"></canvas> <img id="expImg"/> 

您必须了解画布就像一幅图像。 当您在其上应用CSS过滤器时，您实际上并没有在修改文件，而只是在文档中显示文件。

现在，您可以将滤镜直接处理到画布的像素上，并可以保留它们。

这是一个小示例，向您展示如何修改画布像素。

 var draw = function() { c.width = img.width; c.height = img.height; // first draw your image once ctx.drawImage(img, 0, 0); //then get its data var imgData = ctx.getImageData(0, 0, c.width, c.height); // get the array of pixels var arr = imgData.data; //loop through each pixels, 4 per loop because pixels are [R,G,B,A,R,G,B,A...] for (var i = 0; i < arr.length; i += 4) { // store the red value var r = arr[i]; //replace the green value with the red one arr[i] = arr[i + 1]; arr[i + 1] = r; } // put the modified imageData back to your canvas ctx.putImageData(imgData, 0, 0); }; var ctx = c.getContext('2d'); var img = new Image(); img.crossOrigin = 'anonymous'; img.onload = draw; img.src = 'https://dl.dropboxusercontent.com/s/1alt1303g9zpemd/UFBxY.png'; 

 <canvas id="c"></canvas> 

附言：似乎我们很快就能在一个标志下直接设置一个上下文的filter属性，该属性当前仅在FF上可用，但这会使事情变得更容易！