vue点击把某个区域变成图片数据
前言:
使用html2canvas,可以实现把某个区域变成图片的base64数据
官网入口:点我
目录:
实现步骤:
1、引入
npm引入:
js引入:
2、在需要使用的vue组件中引入:
3、将制定区域内转成图片,添加ref标记
4、点击开始转换的方法
到这里,把页面转成图片的步骤就结束了
如果需要下载的话,请继续往下走:
5、同源下载:
6、不同源,跨域的话用这个
到此就结束了!
实现步骤:
1、引入
npm引入:
cnpm install --save html2canvas
js引入:
html2canvas.js
html2canvas.min.js
2、在需要使用的vue组件中引入:
import html2canvas from "html2canvas"
3、将制定区域内转成图片,添加ref标记
<div class="container" ref="imageDom"></div>
4、点击开始转换的方法
/**
* 将页面指定节点内容转为图片
* 1.拿到想要转换为图片的内容节点DOM;
* 2.转换,拿到转换后的canvas
* 3.转换为图片
*/clickGeneratePicture() { //生成图片html2canvas(this.$refs.imageDom).then(canvas => {// 转成图片,生成图片地址this.imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式});
}
到这里,把页面转成图片的步骤就结束了
如果需要下载的话,请继续往下走:
5、同源下载:
var link = document.createElement("a");
link.href = this.imgUrl; // 转换后的图片地址 this.imgUrl == 上面你的baseurl
link.download = "你的图片名字";
document.body.appendChild(link);eleLink.click();// 触发点击
document.body.removeChild(link);// 然后移除
6、不同源,跨域的话用这个
//下载图片地址和图片名
downloadIamge(imgsrc, name) {var image = new Image();// 解决跨域 Canvas 污染问题image.setAttribute("crossOrigin", "anonymous");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 = name || "photo"; // 设置图片名称a.href = url; // 将生成的URL设置为a.href属性a.dispatchEvent(event); // 触发a的单击事件};image.src = imgsrc;
},downImg(){this.downloadIamge(this.pic.url, 'pic')
}
到此就结束了!
vue点击把某个区域变成图片数据相关推荐
- vue点击按钮怎么跳转图片_Vue中点击按钮切换图片;
页面效果比较差,但是有图总比没图强点 这是最开始的页面,我们看到,图中只有一个"右箭头",点击右箭头; 左箭头也有了,然后我们继续点击右箭头; 右箭头没有了,只剩下了左箭头, 以上 ...
- vue点击按钮怎么跳转图片_vue下的h5页面实现点击图片跳转小程序
第一步:配置签名和申明openTagList that.$api.getShareParam(params).then(data => { wx.config({ debug: false, a ...
- vue点击按钮怎么跳转图片_vue页面跳转
一.在template中的常见写法: 点击跳转 二.在js中设置跳转(在方法中跳转界面并传参,两种方式:params 与 query): 有时候我们需要的是点击按钮跳出弹窗,选择判断后进行跳转,我们常 ...
- vue点击按钮怎么跳转图片_vue-router组件里面点击一个按钮跳转到一个新的组件该怎么实现...
展开全部 直接修改地址栏中的路由地址即可: {{msg}} var testLogin = Vue.component("login",{ template:` 这是我的登录页面 ...
- vue 点击动态展示不同的图片
代码部分:可以用三目运算根据状态判断 <div class="svt-s mainSty-center"><div class="svs hand&qu ...
- 【vue项目使用echarts实现区域地图绘制,且可点击单独区域】
vue项目使用echarts实现区域地图绘制,且可点击单独区域 - 菜鸟程序员的总结 - 博客园
- html5取消下拉菜单,Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)...
在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用 HTML 自身的 select 下拉列表.然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击 ...
- vue中点击按钮切换图片
vue中点击按钮切换图片 直接附上代码,亲测有效 <!-- --> <template><div><div class="">< ...
- vue点击其它区域隐藏
mounted() { //点击颜色其它区域隐藏 document.addEventListener('click', this.handleDocumentClick); document.addE ...
最新文章
- (转)Unity3D - 性能优化之Draw Call
- 一个例子来使用sklearn中的TfidfVectorizer
- 在分析了AI顶会上的6163篇论文后,我们能发现怎样的发展趋势与变化……
- 通过apt自动生成建造者模式单线程版代码(三)
- 九阴真经 第十五层--node.js 第1天
- vs2005 无法加载服务器控件解决办法
- 自动给 Asp.Net Core Api 增加 ApiVersionNeutral
- 在哪个国家生活幸福?24秒看完联合国10年报告
- 信息科学 计算机 区别,电子信息科学技术和计算机科学技术有什么区别啊
- mysql外键约束脚本_使用SQL脚本创建数据库,操作主键、外键与各种约束(MS SQL Server)...
- 【PostgreSQL-9.6.3】表继承
- shell中的getopt与getopts
- Spyder单步调试
- 服务器邮件删除了怎么恢复,Exchange邮件误删除不用急 DPM轻松恢复
- 论文编辑与投稿——论文页眉、页码编辑,以及换章时偶数页设置成空白页的操作
- 海底捞:服务喧宾夺主,盈利不见起色
- 热强化硅酸钠玻璃建筑玻璃英国UKCA认证—EN 1863-2
- 五月总结 时光待我不薄
- python面向过程之水果超市
- 玩回合制手游《问道》心得
热门文章
- linux signal用法,Linux 信号 signal 用法详解及注意事项
- 单片机加减法计算器_十进制加减法计算器单片机设计.doc
- 人民币为什么 不继续升值
- sdhc卡文件丢失常见原因和两种恢复方法
- 奇虎360:5年前赴美上市到今私有化退市,未来路在何方?
- virbr0怎么关闭_kvm虚拟化关闭虚拟网卡virbr0的方法
- python symbols函数_有限元平面四边形等差单元python编程
- Ant Design Vue 动态路由
- JavaWeb(狂神老师上课笔记)
- 我的TOM邮箱收件速度真不慢——邮箱常见问题解答大全!