canvas下载图片到本地报错

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <canvas id="canvas1"></canvas>
    <br /><br />
    <input type="button" value="保存png图片" id="btn1" />
    <a href="javascript:" id="down">下载</a>
</body>
<script>
    function draw(){
            var ctx=document.getElementById('canvas1').getContext('2d');
            var img=new Image();
            img.onload=function(){
                ctx.drawImage(img,0,0);
                ctx.beginPath();
            ctx.stroke();
        }
        img.src='btnNews.png';
    }
    draw();
    var canvas = document.getElementById('canvas1');
    //绑定下载事件
    var btn = document.getElementById('btn1');
    btn.onclick = function () {
        var type = 'png';
        download(type);
    }
    //图片下载操作,指定图片类型
    function download(type) {
        //设置保存图片的类型
        var imgdata = canvas.toDataURL(type);
        document.getElementById('down').href=imgdata;
        console.log(imgdata)
        //将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')
        //将图片保存到本地
        var saveFile = function (data, filename) {
            var link = document.createElement('a');
            link.href = data;
            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);
            link.dispatchEvent(event);
        }
        var filename = new Date().toLocaleDateString() + '.' + type;
        saveFile(imgdata, filename);
    }
</script>
</html>

阅读 3.2k

canvas下载图片到本地报错

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

如何实现一个深拷贝函数？

快开发完的Vue3项目要做SEO该如何处理？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？