时间戳

首页 > 解决方案 > 画布 toDataURL 返回空/损坏

javascript - 画布 toDataURL 返回空/损坏

问题描述

我的页面上有一个画布，允许访问者绘制一些东西。我现在想添加一个保存绘图的下载按钮，但保存的 png 始终为空/损坏：“无法打开文件“image.png”。它可能已损坏或使用预览无法识别的文件格式。”

我在这里做错了什么？提前致谢！

<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>

标签： javascripthtml5-canvas

解决方案

我正在分享我在项目中使用的捕获代码，希望您能理解。

var canvas = document.querySelector("#cv1");`

var glastbloburl;

函数 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> &nbsp;<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;
            }
        }           
    }
}

}

推荐阅读