Tengo un lienzo en mi página que permite a los visitantes dibujar algo. Ahora quiero agregar un botón de descarga que guarde el dibujo, pero el png guardado siempre está vacío/dañado: "No se pudo abrir el archivo" image.png ". Puede estar dañado o usar un formato de archivo que Preview no reconoce ."
¿Qué hice mal aquí? ¡Gracias por adelantado!
<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>Estoy compartiendo el código de captura que utilicé en mi proyecto, espero que lo entiendas.
var canvas = document.querySelector("#cv1");`var glastbloburl;
función 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; } } } }}