点击链接/按钮下载图片的实现方法

需求场景

需要根据已给的链接，根据链接生成一个二维码。并在页面上提供点击即可下载该二维码的按钮或链接（链接生成二维码的方法 见链接）

JSP代码

<button class="xxx" id="qrCode">二维码下载</button>

JS代码

这里使用到了layui和Jquery的相关知识

    //下载图片
    //使用JQuery根据ID操作到该按钮并绑定点击事件
   $("#qrCode").on('click',function () {
       layer.msg("正在下载");//使用toast提示
       var image = new Image();//创建一个Image图片
        //为该图片设置图片链接（picUrl注意不能是本地图片的地址）
       image.src = picUrl;
       image.setAttribute('crossOrigin', 'anonymous');
       image.onload=function () {//图片加载处理函数
           var canvas = document.createElement('canvas');
           canvas.width = image.width;//canvas画布
           canvas.height = image.height;
           var context = canvas.getContext('2d');
           context.drawImage(image,0,0,image.width,image.height);
           var url = canvas.toDataURL('image/png')
           var a = document.createElement('a');
           var event = new MouseEvent('click');
           a.download = '活动图片二维码';
           a.href = url;
           a.dispatchEvent(event);
       }
   })