Vue点击按钮下载对应图片

最近有用到点击某个按钮自动下载对应图片，可是对于浏览器不同的问题，会有‘个别’浏览器出现不能下载的或者下载的效果不同等的问题，

可以直接用创建canvas方法：

定义图片地址Img: "www.xxxxx.com/xxx/xxx/xx.jpg"点击事件：
downloadCodeImg() {var image = new Image();image.setAttribute("crossOrigin", "anonymous");var _this = this;image.onload = function () {var canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;var context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据var a = document.createElement("a"); // 生成一个a元素var event = new MouseEvent("click"); // 创建一个单击事件a.download = _this.projectName || "photo"; // 设置图片名称a.href = url; // 将生成的URL设置为a.href属性a.dispatchEvent(event); // 触发a的单击事件};image.src = this.Img;}

转载于:https://www.cnblogs.com/bomdeyada/p/10839022.html

Vue点击按钮下载对应图片相关推荐

vue点击按钮上传图片_vue图片上传
前端代码: style="height: 200px;" class="upload-demo" ref="uploadVideoCoverDemo& ...
vue点击按钮弹窗显示图片
需求是根据当前表格的行数据来获取对应的图片.然后我的行数据里已经有了id值,图片的名称也是id值.所以先通过按钮点击获取对应行的数据.这是写在表格里的按钮. <template slot-sco ...
vue中点击按钮切换图片
vue中点击按钮切换图片直接附上代码,亲测有效  <template><div><div class="">< ...
js下载文件 java_[Java教程]使用js实现点击按钮下载文件
[Java教程]使用js实现点击按钮下载文件 0 2016-11-11 19:02:54 有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方 ...
c #点击按钮下载excel文件
c #点击按钮下载excel文件前端代码省去了,button属性οnclick="excel" public void excel(object sender, EventArg ...
elementui el-image组件点击按钮预览图片
今天遇到一个新的需求,点击按钮查看图片,且图片能放大缩小.如下图: 想到了使用element-ui的el-image组件,官网示例: <div class="demo-image__p ...
[QT]实现点击按钮弹出图片的效果
点击按钮弹出图片的实现 void MainWindow::btnTest() {QLabel* labelImage = new QLabel(this, Qt::Dialog |Qt::Window ...
Vue中实现页面上点击按钮下载文件(exe)
场景若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面搭建起来的Vue前端项目中 ...
vue实现点击按钮，复制图片、文本到粘贴板
最近有个需求,需要点击按钮之后,一键复制内容,内容中有图片,有文字,需要都复制出来,于是发现了一个轻巧.方便的插件 clipboard-all (https://www.npmjs.com/pac ...

Vue点击按钮下载对应图片

Vue点击按钮下载对应图片相关推荐

最新文章

热门文章