¿Cómo descargar una imagen que está en canvas HTML5?

Escribí esta aplicación webRTC que toma fotos con diferentes filtros agregados. Cuando hago clic en el botón de clic, el marco de la fuente de video webRTC se carga en el canvas en el lado derecho.

introduzca la descripción de la imagen aquí

Código HTML –

La función que he escrito para ajustar la imagen en el canvas después de agregar el filtro es la siguiente

 function snap() { canvas.className = ''; if (findex != 0) canvas.classList.add(filters[findex]); canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height); }

¿Cómo puedo permitir que el usuario descargue la imagen en la computadora desde el canvas con los filtros después de hacer clic en la foto?

Puede hacerlo utilizando el método .toDataURL() en el elemento del canvas . Y luego aplique esto al atributo de download a una etiqueta . Podemos agregar una etiqueta de anclaje alrededor de la imagen:

Ahora para hacer clic en el canvas, ajustamos la download y href del padre:

 $('#canvas').click(function(){ $(this).parent().attr('href', document.getElementById('canvas').toDataURL()); $(this).parent().attr('download', "myPicture.png"); });

Aquí hay un ejemplo

También puede considerar el uso de Concrete.js, que es un liviano HTML5 Canvas Framework que hace cosas periféricas como esta, incluidas las descargas. Simplemente harías:

 canvas.download({ fileName: 'my-file.png' });