javascript - change value of button with jquery

Guardar lienzo con filtro CanvasRenderingContext2D

Question

Tengo el problema de guardar la foto con CanvasRenderingContext2D.filter. Cuando me conecto al video y trato de tomar una foto sin ningún filtro, se guarda normalmente. Sin embargo, después de agregar algunos filtros al lienzo, se guarda como archivo HTM o devuelve una foto anterior sin filtros, si se creó. Lo extraño es que al descargar esa captura de pantalla manualmente al hacer clic en ella, tiene la propiedad toDataUrl, se descarga normalmente y contiene el filtro, pero al guardarla usando toDataUrl, aún no se ve esa imagen. ¿Qué debo hacer para guardar fotos con estos filtros?

Aquí está la parte de mi código:

var canvas = document.getElementById(''canvas'');
var context = canvas.getContext(''2d'');
var video = document.getElementById("video");
document.getElementById("snapshot").addEventListener("click", function() {
if ($(''video'').hasClass(''blur'')) {
context.filter ="blur(2px)";
}
else {
context.filter= "";
}
context.drawImage(video, 0, 0);
});
document.getElementById("download").addEventListener("click", function() {
download.href = canvas.toDataURL("image/jpeg");
};

.blur {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
-o-filter: blur(3px);
filter: blur(3px);
}

<video id="video" autoplay></video>
<canvas id="canvas"></canvas>
<button id="download" download="picture" href=""></button>

Answer 1

[Editar]: este error se ha corregido en FF52 + (actual más reciente).
Dejo la respuesta y su solución en caso de que ayude a alguien en algún momento.

Esto parece ser un error en Firefox con funciones de filtro. Chrome 54 parece manejarlo correctamente.

Cuando se pasa una función de filtro como el valor de ctx.filter , FF mancha el lienzo, haciendo que todos los métodos de exportación no toDataURL disponibles ( toDataURL incluido).

Sin embargo, parece bastante feliz con los filtros svg, por lo que una solución, hasta que se solucione este error , es usar un filtro svg junto con el tipo de valor url(#yourSVGFilter) .

var img = new Image();
var c = document.createElement(''canvas'');
var ctx = c.getContext(''2d'');
document.body.appendChild(c);
btn.onclick = function() {
var i = new Image();
i.src = c.toDataURL();
document.body.appendChild(i);
};
img.onload = function() {
c.width = this.naturalWidth;
c.height = this.naturalHeight;
// this doesn''t taint the canvas
ctx.filter = ''url(#blurMe)'';
ctx.drawImage(img, 0, 0);
}
img.crossOrigin = ''anonymous'';
img.src = ''https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png'';

<svg width="0" height="0">
<filter id="blurMe">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
</svg>
<button id="btn">call toDataURL()</button><br>

(Y un violín que reproduce el problema por curiosidad)