javascript - una - cómo guardar DIV como imagen con canvas2image con extensión

guardar el contenido de un div en una variable php

Question

He hecho el siguiente código para convertir contenido HTML (DIV) para guardar como imagen (JPEG, PNG, GIF Etc) con el código siguiente.

<pre>   
html2canvas($(".mainbox"), {
    onrendered: function(canvas) {
       theCanvas = canvas;
       document.body.appendChild(canvas);
       Canvas2Image.saveAsImage(canvas); 
       $("#FinalImage").append(canvas);
    }
});
</pre>  

También he incluido html2canvas.js , base64.js y canvas2image.js en mi página. Al final, la imagen se muestra en #FinalImage DIV y el navegador me pide que la guarde en mi disco hasta ahora, todo funciona bien.

Ahora la pregunta es: el nombre de la imagen guardada no tiene extensión, cada vez que necesito ir a la imagen y asignar la extensión (". Jpg", ". Png", etc.). ¿Hay alguna solución para establecer la extensión por defecto cuando el usuario la guarda desde el navegador?

Gracias por adelantado.

Answer 1

He hecho la misma funcionalidad para capturar la firma. Esto es diferente de tu enfoque. pero este fragmento de código puede ser útil. por favor comente si necesita un código fuente completo.

var canvas = document.getElementById(<canvas element id>)// get canvas element
var dataURL = canvas.toDataURL("image/png");// convert to img, specify extension
document.getElementById(<new image id>).src = dataURL; // write as an image

En la línea dos, especifiqué png Allí puede cambiar la extensión de la imagen. Espero eso ayude