So I have a script that creates a canvas and I was wondering if there was anyway to have a button on the html page that when clicked it will save the canvas on that page to the web server as a jpg image.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="200" style=" border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "40pt Calibri";
context.fillText("My TEXT!", 50, 100);
context.font = "20pt Calibri";
context.fillStyle = 'red';
context.fillText("Tesr", 50, 200);
};
imageObj.src = "Assets/Background2.png";
};
</script>
<button onclick="Saveimage"></button>
</body>
</html>
From the topics I gives in comment, it gives strange result. And as I don't know if you insist the button be <button> and not a <a>, I created a workaround to make it seems work.
Edited:
If you want to save Image to server.
Change
// Create a hidden link to do the download trick.
var a =document.createElement("a");
a.setAttribute("href", image);
a.setAttribute("download", "canvas.png");
a.click();
to
var post = new XMLHttpRequest();
// I assume your web server have a handler to handle any POST request send to
// '/receive' in the same domain.
// Create a POST request to /receive
post.open("POST", "/receive");
// Send the image data
post.send(image);
And you may need some further process at your server side to save the posted data to local file system, like what I did in my node.js server:
// Handle POST from xxx/receive
app.post('/receive', function(request, respond) {
// The image data will be store here
var body = '';
// Target file path
var filePath = __dirname + '/testWrite/canvas.png';
//
request.on('data', function(data) {
body += data;
});
// When whole image uploaded complete.
request.on('end', function (){
// Get rid of the image header as we only need the data parts after it.
var data = body.replace(/^data:image\/\w+;base64,/, "");
// Create a buffer and set its encoding to base64
var buf = new Buffer(data, 'base64');
// Write
fs.writeFile(filePath, buf, function(err){
if (err) throw err
// Respond to client that the canvas image is saved.
respond.end();
});
});
});
var saveImgae = function() {
var canvas = document.getElementById("myCanvas");
var image = canvas.toDataURL("image/png");
// Create a hidden link to do the download trick.
var a =document.createElement("a");
a.setAttribute("href", image);
a.setAttribute("download", "canvas.png");
a.click();
// Not work for me. It download a file , but without file type and filename is simply download, maybe it works for someone.
// var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
// window.location.href=image; // it will save locally
};
// This is just something like your onclick="saveImage()"
var button = document.querySelector("button");
button.onclick = saveImgae;
// Fakes , I just want to demo the click...
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "40pt Calibri";
context.fillText("My TEXT!", 50, 100);
context.font = "20pt Calibri";
context.fillStyle = 'red';
context.fillText("Tesr", 50, 200);<canvas id="myCanvas" width="400" height="200" style=" border:1px solid #d3d3d3;"></canvas>
<button id="save">Save image</button>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments