canvas 导出为图片兼容ie10+,谷歌,火狐等浏览器,代码详解

效果图:


image.png

导出效果:


image.png

如果canvas设置了背景色,导出的图片就不是透明的了,如:


image.png

代码如下,里面详细写了注释,可以快速看懂:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<button id="btn">导出图片</button>
<br/>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas
    标签。
</canvas>
</body>
<script>

    // base64转blob
    function base64ToBlob(code) {
        // 截取base64的数据内容(去掉前面的描述信息,类似这样的一段:data:image/png;base64,)
        var parts = code.split(";base64,");
        var contentType = parts[0].split(":")[1];
        var raw = window.atob(parts[1]); // 解码为2进制数据
        var rawLength = raw.length; // 获取解码后的二进制数据的长度,用于后面创建二进制数据容器
        // 创建
如若转载请注明原文及出处:https://www.dsiab.com/post/5bbba30c-1696-41ac-9808-1ff64bfcfd4d
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。

评论: