Guardar el lienzo HTML como una imagen es bastante fácil, se puede hacer simplemente haciendo clic derecho en el lienzo y guardarlo como una imagen. Pero guardar el lienzo como una imagen en el servidor es bastante diferente. Este artículo le mostrará cómo lograrlo. A veces es necesario guardar la imagen del lienzo después de realizar un procesamiento del servidor y este artículo ayudará a enviar la imagen del lienzo al servidor para su procesamiento.
Aquí verá cómo convertir un contenido HTML en una imagen usando JQuery. Sabemos que hay complementos html2canvas, al usar ese complemento podemos convertir fácilmente el contenido HTML en contenido de imagen, luego podemos guardar ese archivo haciendo clic con el botón derecho y eligiendo la opción Guardar imagen.
Después de eso, convertiremos esa imagen CANVAS al formato de URL y eso al servidor usando ajax, luego la parte principal será hecha por el código PHP. El código PHP guardará esa imagen en su servidor.
Los pasos a continuación ilustrarán el enfoque claramente.
Paso 1: código HTML para convertir lienzo en imagen.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
</script>
<style>
.top {
margin-top: 20px;
}
h1 {
color: green;
}
input {
background-color: transparent;
border: 0px solid;
width: 300;
}
body {
text-align: center;
}
</style>
</head>
<body>
<div class="col-md-offset-4 col-md-4 col--md-offset-4 top">
<div id="createImg" style="border:1px solid;">
<h1>GeeksforGeeks</h1>
<h4>How to save an HTML5 Canvas as an
image on a server?</h4>
<input type="text" value=""
placeholder="Enter wahtaever you want" class="form-control" />
<br/>
</div>
<button id="geeks" type="button"
class="btn btn-primary top">
Create Image</button>
<div id="img" style="display:none;">
<img src="" id="newimg" class="top" />
</div>
</div>
<script>
$(function() {
$("#geeks").click(function() {
html2canvas($("#createImg"), {
onrendered: function(canvas) {
var imgsrc = canvas.toDataURL("image/png");
console.log(imgsrc);
$("#newimg").attr('src', imgsrc);
$("#img").show();
var dataURL = canvas.toDataURL();
$.ajax({
type: "POST",
url: "script.php",
data: {
imgBase64: dataURL
}
}).done(function(o) {
console.log('saved');
});
}
});
});
});
</script>
</body>
</html>
Paso 2: Muestre la salida para verificar que el lienzo se haya convertido correctamente en una imagen.
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Paso 3: Convertir la imagen en formato URL usando el método canvas.toDataURL().
var dataURL = canvas.toDataURL();
Paso 4: Enviar el formato de URL convertido a su servidor a través de Ajax.
$.ajax({
type: "POST",
url: "script.php",
data: {
imgBase64: dataURL
}
}).done(function(o) {
console.log('saved');
});
Paso 5: Este código php guardará la imagen en el servidor.
<?php
// Requires php5
define('UPLOAD_DIR', 'images/');
$img = $_POST['imgBase64'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>
¿Escribir código en un comentario? Utilice ide.geeksforgeeks.org , genere un enlace y compártalo aquí.