canvas生成图片并下载

最新推荐文章于 2024-04-14 12:13:08 发布

web修理工

最新推荐文章于 2024-04-14 12:13:08 发布

阅读量688

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_42374676/article/details/134113919

版权


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="change" width="88" height="6"></canvas>
    <button onclick="bnt()">按钮</button>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("change");
    var context = canvas.getContext('2d');
    context.fillStyle = 'rgba(26, 207, 185, 0.8)';
    context.fillRect(0, 0, 88, 6);
    function bnt() {
        console.log(888)
        // console.log(123,canvas.toDataURL('image/png'))
        //     let a = document.createElement('a');
        //     a.download = 'tupian.png';
        //     a.href = canvas.toDataURL('image/png');
        //     a.click();


        canvas.toBlob(function (blob) {//blob将base64编码的src 以二进制的形式存进了 Blob对象
            
        

            let a = document.createElement('a');
            a.download = 'tupian.png';
            a.href = window.URL.createObjectURL(blob);
            a.click();
            console.log(blob)

        }, 'image/png');

    }


</script>

</html>