react - Cómo guardar img en la computadora local del usuario usando HTML2canvas
html2canvas scale example (2)
actualización 2018
Tenga en cuenta que en las nuevas versiones de Html2Canvas la opción onrendered está en deprecated y es reemplazada por promesas.
Para poder descargar la imagen a la computadora del usuario, puede usar algo como esto:
Html
<html>
<head></head>
<body>
<div id="boundary">
<div class="content">
<p>My content here</p>
</div>
</div>
<button id="download">Download</button>
</body>
</html>
Javascript
Basado en la respuesta de Krzysztof
document.getElementById("download").addEventListener("click", function() {
html2canvas(document.querySelector(''#boundary'')).then(function(canvas) {
console.log(canvas);
saveAs(canvas.toDataURL(), ''file-name.png'');
});
});
function saveAs(uri, filename) {
var link = document.createElement(''a'');
if (typeof link.download === ''string'') {
link.href = uri;
link.download = filename;
//Firefox requires the link to be in the body
document.body.appendChild(link);
//simulate click
link.click();
//remove the link when done
document.body.removeChild(link);
} else {
window.open(uri);
}
}
Problema encontrado
De hecho, pude descargar la imagen, pero estaba en blanco ... la posible causa de esto (al menos en mi caso) fue que el contenedor de contenido ( id = "# boundary" ) no tiene ancho o alto definido, por lo que especifica una altura y un ancho para el contenedor de contenido hicieron el truco para mí.
espero que esto ayude
Estoy mostrando una captura de pantalla en un clic con HTML2canvas .4.1 y quiero guardar la imagen en la computadora local del usuario. ¿Cómo se puede lograr esto? Tenga en cuenta que soy un principiante, por lo que el código real será de gran ayuda para mí.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<button id="save_image_locally">download img</button>
<div id="imagesave">
<img id=''local_image'' src=''img1.jpg''>
</div>
<script>
$(''#save_image_locally'').click(function(){
html2canvas($(''#imagesave''),
{
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
alert(''This will currently open image in a new window called "data:". Instead I want to save to users local computer. Ideally as a jpg instead of png.'');
window.open(img);
}
});
});
</script>
Intente esto (tenga en cuenta que Safari abre la imagen en la misma pestaña en lugar de descargarla; el atributo de descarga no es compatible con Safari)
<script>
$(''#save_image_locally'').click(function(){
html2canvas($(''#imagesave''),
{
onrendered: function (canvas) {
var a = document.createElement(''a'');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = ''somefilename.jpg'';
a.click();
}
});
});
</script>