文档章节

vue中点击按钮自动截图并下载图片

o
 osc_zoa3moe9
发布于 2019/12/09 10:42
字数 304
阅读 5
收藏 0

精选30+云产品,助力企业轻松上云!>>>

点击一个按钮,截取对应区域的界面,才对截取的界面进行裁切并下载

下载    html2canvas    npm install html2canvas  --save

引用 :

import html2canvas from 'html2canvas'


components: {
html2canvas
},

将你需要截取的部分用 id 包裹起来
<div id="capture" ref="imageTofile">......</div>

获取该区域
html2canvas(document.querySelector("#capture")).then(canvas => {
const imgUrl = canvas.toDataURL("png"); // 获取生成的图片的url
console.log(imgUrl)
})


这样就可以得到你需要需要截取的屏幕区域了





如果你需要再次对这样图片进行裁切

const img = new Image();
img.src = canvas.toDataURL("png");
img.setAttribute('crossOrigin', 'anonymous');
var canvas = document.createElement("canvas");//1. 获取画布

const num = this.dataLength * 48 + 148;
console.log(canvas)
canvas.width = 530;//这个设置不能丢,否者会成为canvas默认的300*150的大小
canvas.height = 500;//这个设置不能丢,否者会成为canvas默认的300*150的大小
var ctx = canvas.getContext("2d");//2. 获取画布上下文
img.onload=function() {
var w = img.width
var h = img.height
ctx.drawImage(img, 0, 0, w, h, 0, 0, w, h)
var dataURL = canvas.toDataURL("image/png");
console.log('裁切后',dataURL)
saveFile(dataURL,'images.jpg');// 下载图片

}




下载图片
var saveFile = function(data, filename){
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;

var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
}





o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
VBoot1.0发布,Vue & SpringBoot 综合开发入门

vboot是一个 Vue 和 SpringBoot2.0的组合基础工程。如果你喜欢使用这两个框架做前后台开发,而又不知道如何让它们很好的组合,那么这个项目可能会是你入手学习的一个很好选择。 项目地址: ...

夏悸
2018/08/12
71
0
使用 vue3 编写 tampermonkey 插件

你没看错.... 确实是用vue3.0 编写油猴插件.... 刺激~ 修改自 vue-next-webpack-preview 几乎没怎么改, 主要加了less 开发背景 首先尝试过油猴对于大型脚本的支持(脚本在50~100kb)还是不错的...

阿豪boy
01/31
25
0
ASP.NET MVC+Vue.js实现联系人管理

接触了一天vue.js,简单浏览了一本关于vue的电子书,就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序。 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么样的...

osc_dl4yv4ox
2018/06/12
1
0
vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

一、项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室——vueWebChat,实现了发送消息、表情(动图),图片、视频...

osc_fjbsh38p
2019/04/30
14
0
ASP.NET MVC+Vue.js实现联系人管理

接触了一天vue.js,简单浏览了一本关于vue的电子书,就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序。 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么样的...

guwei4037
2018/06/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用命名管道承载gRPC

最近GRPC很火,感觉整RPC不用GRPC都快跟不上时髦了。 gRPC设计 gRPC是一种与语言无关的高性能远程过程调用 (RPC) 框架。刚好需要使用一个的RPC应用系统,自然而然就盯上了它,但是它真能够解...

osc_nq69o22c
43分钟前
16
0
06-敏捷开发框架-apis 脚本库 引用位置无关性设计

动态引入技术的设计,对我们来说非常重要。 同时也说明动态语言的使用对我们来说也是非常重要。 没有动态语言的支撑,有些想法可能不容易实现,或者有替代方案,可能会花更大的代价。 前端开...

osc_5zg9z6t1
44分钟前
21
0
(三)学习了解OrchardCore笔记——灵魂中间件ModularTenantContainerMiddleware的第一行①的模块部分

  了解到了OrchardCore主要由两个中间件(ModularTenantContainerMiddleware和ModularTenantRouterMiddleware)构成,下面开始了解ModularTenantContainerMiddleware中间件第一行代码。   ...

osc_kdarxvx0
46分钟前
15
0
50Mn18Cr4V锻锻环件

电机无磁护环怎么锻性能才能《高高》?50Mn18Cr4V高锰无磁钢在变形温度为900~1 100℃、应变速率为0.1 ~10s-1条件下的热变形行为. 结果,VC第二相的应变诱导析出对50Mn18Cr4V的热变形行为产生...

无磁钢
46分钟前
16
0
【遇见offer】一汽-大众实习生专场来啦!成长+学习+福利,一个也不能少~

在上次一汽-大众的社招直播之后,实习生的专场招聘也终于来啦! 针对2020年暑期,我们提供了非常多的实习岗位给大家选择。 如果你想得到大厂实习的宝贵经验,如果你想得到更快速的成长,如果...

osc_b88oux8w
48分钟前
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部