jQuery 实现点击下载img标签的图片（自用）

最新推荐文章于 2024-07-26 15:05:55 发布

Climbing-pit

最新推荐文章于 2024-07-26 15:05:55 发布

阅读量446

点赞数 2

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_37507261/article/details/137605610

版权

本文介绍了如何在JavaScript中为移动端下载二维码图片，通过click事件触发下载，同时处理了跨域问题，利用Canvas将图片转换为dataURL进行下载。

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

<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;
};