首页 前端知识 jQuery 实现点击下载img标签的图片(自用)

jQuery 实现点击下载img标签的图片(自用)

2024-09-28 23:09:35 前端知识 前端哥 927 580 我要收藏
<div>               
    <img id="qrcodeImg" src="http://localhost:9099/Library/Qrcode/4464e901b7ed4fcf9e3452701a521df7.jpg">               
     <button type="button" id="download-button">                   
        <i class="ace-icon fa fa-download"></i>                   
        <span>下载二维码(移动端)</span>               
     </button>           
</div>

绑定click事件

function downloadQrcode(downloadButton) {
    $("#"+downloadButton).click(function() {
        //得到图片
        var imgSrc = $('#qrcodeImg').attr("src");
        downloadIamge(imgSrc, "img"+new Date().getTime());
    });
}

下载图片方法

function downloadIamge(imgsrc, name) {//下载图片地址和图片名
    let image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute("crossOrigin", "anonymous");
    image.onload = function() {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        let url = canvas.toDataURL("image/png");
        let a = document.createElement("a");
        let event = new MouseEvent("click");
        a.download = name;
        a.href = url;
        a.dispatchEvent(event);
    };
    image.src = imgsrc;
};

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18691.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!