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

最新推荐文章于 2024-06-26 09:00:10 发布

u010738364

最新推荐文章于 2024-06-26 09:00:10 发布

阅读量2.4k

点赞数

分类专栏： html5 JavaScript

本文链接：https://blog.csdn.net/u010738364/article/details/76954210

版权

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

摘要由CSDN通过智能技术生成

先放上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 () {