I have a canvas on my page that allows visitors to draw something. I now want to add a download button that saves the drawing but the saved png is always empty/damaged: "The file "image.png" could not be opened. It may be damaged or use a file format that Preview doesn’t recognise."
What did I do wrong here? Thanks in advance!
<canvas id="c"></canvas>
<a href="" id="downloader" onclick="download()" download="image.png">Save</a>
<script type="text/javascript">
var el = document.getElementById('c');
var ctx = el.getContext('2d');
onmousemove = function(e) {
ctx.lineWidth = 15;
ctx.lineJoin = ctx.lineCap = 'round';
ctx.strokeStyle = '#000000';
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
}
</script>
<script type="text/javascript">
function download(){
document.getElementById("downloader").download = "image.png";
document.getElementById("downloader").href = document.getElementById("c").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
}
</script>
I am sharing capture code which i used in my project, I hope you you understand it.
var canvas = document.querySelector("#cv1");`
var glastbloburl;
function proc_cature(){
if(!canvas)return;
if(!window.URL){
alert("This browser does not support.");
return;
}
var strMime, filename;
if(g_lastdata2 && g_lastdata2.resp){
filename=getfilename(g_lastdata2.resp.title);
}
if(!filename) filename='Capture';
if(_getid('capturekind').value=='png'){
strMime="image/png";
filename+=".png";
}else{
strMime="image/jpeg";
filename+=".jpg";
}
var strData=canvas.toDataURL(strMime);
var blob=b64toBlob(strData.substr(strData.indexOf(",")+1,strData.length), strMime);
if(glastbloburl) window.URL.revokeObjectURL(glastbloburl);
glastbloburl=window.URL.createObjectURL(blob);
var s='<a href="#" id="capturedown">Download</a> <a href="'+glastbloburl+'" target="_blank">View</a> '+getsize(blob.size);
_getid('msg5').innerHTML=s;
var blobLink=_getid('capturedown');
if(blobLink){
blobLink.onclick=function(){
if(navigator.msSaveBlob){
navigator.msSaveBlob(blob, filename);
return false;
}else{
blobLink.download = filename;
if(issafari){
window.open(glastbloburl);
return false;
}else{
blobLink.target='_blank';
blobLink.href=glastbloburl;
}
}
}
}
}