动态生成二维码图片后通过js(JavaScript)或jq实现网页图片转base64格式下载

原创于 2017-08-09 09:28:34 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

2 篇文章

订阅专栏

html5

1 篇文章

订阅专栏

本文介绍了一种方法，通过JavaScript和jQuery在网页上动态生成二维码图片，并将其转换为base64格式。使用`getBase64Image`函数将二维码图片绘制到canvas上，然后转换为base64数据。当图片加载完成后，将其赋值给下载链接的`href`属性，用户点击下载按钮即可下载base64编码的二维码图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先放上js，getBase64Image是用canvas转化base64的核心函数，main是通过创建一个新的img图片节点来触发getBase64Image。

<script>
    function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var dataURL = canvas.toDataURL("image/png");//修改图片后缀
        return dataURL
    }
    function main() {
        var img = document.createElement('img');
        img.src =$("#h5qrcodeimg").attr('src');//赋予二维码src
        img.onload =function() {
            var data = getBase64Image(img);
            console.log(data);
            $("#down_qrcode").attr("href",data);//转码后赋予下载按钮(a标签)的href
        };
    }
    $(function () {
        main();//选择需要的时候触发执行函数
    });

</script>

html如下,a链接要加入download属性告知是下载链接而不是打开链接

<div id="h5qrcode">
    <img id="h5qrcodeimg" src="/t.php/tenant/plugin/execute/_plugin/Qrcode/_controller/Qrcode/_action/generate/text/d3d3LmJhaWR1LmNvbQ%3D%3D.html">
</div>
<a href="" class="btn btn-default" id="down_qrcode" download="二维码扫码签到">下载二维码</a>