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

Love The Way You Lie 2022-08-31 14:28 241阅读 0赞

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

*  需求场景
 *  JSP代码
 *  JS代码

# 需求场景 #

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，241人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML ＜a＞ download 属性,点击链接来下载图片

Html5里面的标签的 Download 属性可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf,

冷不防/ 2022年12月09日 13:56/ 0 赞/ 369 阅读

相关 js实现点击按钮使图片排序

效果 1 、点击按钮如果按钮文字是从大到小将li标签按照从大到小的顺序排列文字改成从小到大如果按钮文

梦里梦外;/ 2022年09月11日 15:27/ 0 赞/ 253 阅读

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

点击链接/按钮下载图片的实现方法需求场景 JSP代码 JS代码需求场景需要根据已给的链接，根据链接生成一个二维码。并在页面上提供点击即可下

Love The Way You Lie/ 2022年08月31日 14:28/ 0 赞/ 242 阅读

相关实现点击图片下载

实现点击图片下载 1.编写java代码 / 点击图片下载 @param imagePath @return

系统管理员/ 2022年06月05日 00:10/ 0 赞/ 265 阅读

相关 js 实现点击按钮

需求说明有时候为了更好的用户体验，我们需要js来实现点击按钮的操作 -------------------- html代码 <button type="

你的名字/ 2022年02月20日 08:55/ 0 赞/ 873 阅读

相关 JS 实现点击按钮实现超链接功能

url = '/webroot/decision/view/report?viewlet=InshipOutship/Outship.frm'; 新窗口打开报表：window

我就是我/ 2022年01月10日 11:07/ 0 赞/ 1589 阅读

相关 ng 点击按钮下载文件

const a = document.createElement('a'); // 创建a标签 document.body.appendChild(a); //

淩亂°似流年/ 2022年01月07日 10:41/ 0 赞/ 196 阅读

相关 jQuery如何通过点击按钮实现图片的切换，和超链接地址的跳转？

点击一张图片更换为另一张图片：  <script type="text/javascript" src="

我会带着你远行/ 2021年12月11日 09:41/ 0 赞/ 251 阅读

相关 Flutter之点击按钮打开百度链接

1 需求点击按钮，打开百度链接 2 代码实现 import 'package:flutter/material

╰+攻爆jí腚メ/ 2021年09月24日 14:32/ 0 赞/ 331 阅读

相关【html】点击图片内链接进行跳转

博主因为工作中遇到，有些UI图片里有多个链接，要求用户可以点击图片内相关的链接进行跳转。比如：以下是一张图片（非页面），但是要求点击图片不同位置，跳转到不同网址： !

╰+攻爆jí腚メ/ 2021年09月24日 07:28/ 0 赞/ 398 阅读