将canvas保存为图片的方法

ps:网上爬来的一段代码:

<!--图片另存为--->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>通过js保存图片到本地 </title>
</head>

<body>
    <!--创建一个cavas  用来存放图片-->
    <div>
        <div>
             <canvas  id="myCanvas" width="500" height="500" ></canvas>
        </div>
        <div>
            <!--        声明一个按钮  用来触发下载图片到本地-->
            <input type="button" id="save" value="保存图片到本地" onclick="screenShot()"/>
        </div>
    </div>
</body>
</html>
<script>
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#FF0000';
    ctx.fillRect(0,0,80,100);

    function screenShot()
    {
        var type ='png';
        var d=document.getElementById("myCanvas");
        var imgdata=d.toDataURL(type);
        //2.0 将mime-type改为image/octet-stream,强制让浏览器下载
        var fixtype=function(type)
        {
            type=type.toLocaleLowerCase().replace(/jpg/i,'jpeg');
            var r=type.match(/png|jpeg|bmp|gif/)[0];
            return 'image/'+r;
        };
        imgdata=imgdata.replace(fixtype(type),'image/octet-stream');
        //3.0 将图片保存到本地
        var date=new Date();
        var filename=''+date.getHours()+':'+date.getMinutes()+":"+date.getSeconds()+'.'+type;
        savaImage(imgdata,filename);
    };

    function savaImage(data,filename)
    {
        var save_link=document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href=data;
        save_link.download=filename;
        var event=document.createEvent('MouseEvents');
        event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
        save_link.dispatchEvent(event);
    };
</script>

猜你喜欢

转载自blog.csdn.net/sinat_38301574/article/details/80560361