用 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>

Ps : 看来我们很快就能直接设置上下文的 filter 属性，目前仅在 FF 上可用，在一个标志下，但这会让事情变得更容易！