vue实现点击按钮保存图片
HTML部分:
<div class="btn" @click="saveImg">保存海报</div>
js部分:
downloadIamge: function(imgsrc, name) {let image = new Image();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"); //得到图片的base64编码数据let a = document.createElement("a"); // 生成一个a元素let event = new MouseEvent("click"); // 创建一个单击事件a.download = name || "海报"; // 设置图片名称没有设置则为默认a.href = url; // 将生成的URL设置为a.href属性a.dispatchEvent(event); // 触发a的单击事件};image.src = imgsrc;},saveImg: function() {this.downloadIamge(this.ResImgUrl, 'result');//this.ResImgUrl:图片地址,result:图片名称},
vue实现点击按钮保存图片相关推荐
- vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
- vue怎么实现点击复制html,Vue实现点击按钮复制文本内容的例子
Vue实现点击按钮复制文本内容的例子 点击复制功能主要通过 clipboard.js 来实现 在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话 ...
- Vue实现点击按钮上下滑动隐藏或展示查询条件
如图中的是jquery实现的,那么在vue中如何实现呢? 结合自己的项目进行了整合,具体的额模块代码如下所示: 第一步新建组件js 建个JS文件,随便取个名字,把下面的js复制进去,我这里叫moreS ...
- vue实现点击按钮展开侧边栏,再点击按钮收起
最近项目里有个需求需要点击按钮实现侧边栏展开收起状态,看了很多,其他实现都是比较复杂的,下方是用最简便的代码实现想要的效果. 如果所示: //侧边栏内容区域 //为了看的方便,只放主要代码,内容根据需 ...
- vue实现点击按钮,复制图片、文本到粘贴板
最近有个需求,需要点击按钮之后,一键复制内容,内容中有图片,有文字,需要都复制出来,于是发现了一个轻巧.方便的插件 clipboard-all (https://www.npmjs.com/pac ...
- Vue实现点击按钮进行文件下载(后端Java)
最近项目中需要实现点击按钮下载文件的需求,前端用的vue,因为文件是各种类型的,比如图片.pdf.word之类的.这里后端是可以返回文件的地址给前端的,但我看了下网上各种五花八门的答案,感觉都不是我想 ...
- vue.js点击按钮导出_怎样安装vuejs devtools助力vuejs高效开发
vuejs devtools可以方便且高效的帮助前端开发者调试vuejs代码,vuejs devtool支持chrome和firefox,但是在境内用chrome安装浏览器插件不方便,所以本文介绍在f ...
- vue实现点击按钮调用摄像头扫码
vue在APP端点击[扫码签到]按钮实现调取摄像头扫码: 1.按钮页面: <template><div><button @click="scanCode&quo ...
- 用vue实现点击按钮,弹出一个视频,视频可拖动放大缩小
components/modal/ModalShow.vue <template><div><el-dialogtitle="操作指南":visibl ...
最新文章
- 网络推广——企业网站停止网络推广会对网站产生负面影响
- cordova:Error: Cannot find module '../cordova/platform_metadata'
- mine 规范_《民用建筑热工设计规范》GB50176-2016
- java正则表达式空行_正则表达式删除空行
- spring task 定时
- boost::geometry::detail::as_range用法的测试程序
- sock 文件方式控制宿主机_sock
- 2019 Power BI最Top50面试题,助你面试脱颖而出系列中
- spring boot 多数据源分布式事务处理
- Linux之dd命令使用
- 微信抢红包插件 android 8.0,微信抢红包插件
- 汽车Bootloader原理
- Seek the Name, Seek the Fame POJ - 2752(KMP和hah两种方法求公共前后缀)
- android模拟器横屏快捷键,Android模拟器横屏切换方法
- BC35 RAI功能应用
- 企业邮箱品牌选择,公司邮箱托管,外包企业邮箱哪个好?
- Idea解决jar包冲突问题
- 技术答疑 普通音效、技能音效与动画音效的区别
- SHU语义网与知识图谱
- 弄清std::chrono::system_clock::time_point,自定义时间工具类