vue中点击按钮自动截图并下载图片
点击一个按钮,截取对应区域的界面,才对截取的界面进行裁切并下载
下载 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);
}
vue中点击按钮自动截图并下载图片的更多相关文章
- vue中点击按钮复制内容
<el-button type="primary" round size="mini" @click="copyUrl">复制u ...
- Vue点击按钮下载对应图片
最近有用到点击某个按钮 自动下载对应图片,可是对于浏览器不同的问题,会有‘个别’浏览器出现不能下载的或者下载的效果不同等的问题, 可以直接用创建canvas方法: 定义图片地址Img: "w ...
- vue中点击空白处隐藏弹框(用指令优雅地实现)
在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div c ...
- 解决IE浏览器中点击按钮上传无效的问题
前几天写了上传功能,点击按钮上传,在谷歌中是没有任何问题的: 但是在IE浏览器中点击没有任何效果 源代码如下: 后来发现在Firefox.IE浏览器中button标签内部可以含有其他标签,但是不能对 ...
- VB.Net中点击按钮(Button)会重复提交两次表单
在VB.NET程序开发过程中遇到一个问题 提交一个表单时,button的html代码如下 <asp:Button ID="btnSubmit" OnClick="c ...
- electron-vue中点击按钮,实现打开程序目录里面的某个文件
设计到的知识点: explorer.exe /select 打开文件夹并把焦点放到指定文件 nodejs中的process模块--child_process.exec 我这里是根据需求,点击按钮后打开 ...
- 点击按钮每次都能实现图片的旋转和切换(swift)
效果如图: 代码如下: // // ViewController.swift // TwoSidedView // // Created by mayl on 2017/12/14. // Copyr ...
- vue中点击复制粘贴功能
1.下载clipboard.js cnpm install clipboard --save 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 import Clipboard fro ...
- vue 点击按钮弹窗,点击关闭按钮关闭弹窗。
<div @click="btnfc()">点击弹窗按钮</div> <div v-show="show"> <div ...
随机推荐
- C++学习 之 程序的组成部分(部分知识笔记)
1.预处理器编译指令#include: 预处理器是在程序编译前运行的工具.预处理器编译指令是向预处理器发送的命令,总是以#为标识,include便是其中常见的一种,用于引用文件,比如:iostream ...
- Jenkins常用插件介绍
摘要: 对于中小型运维团队,jenkins作为运维利器,可以解决很多工作中的痛点.基于UI的特性从而让使用者的入门成本很低,基于插件可以具备认证,记录,条件触发以及联动,让运维工程师可以将精力放在业务 ...
- 进阶Java编程(5)基础类库
Java基础类库 1,StringBuffer类 String类是在所有项目开发之中一定会使用到的一个功能类,并且这个类拥有如下的特点: ①每一个字符串的常量都属于一个String类的匿名对象,并且不 ...
- (转载)项目中表、类、包、JSP命名规范
对于Java(包括在jsp中)的代码,类名一律用pascal标记法,每个单词的头个字母大写:参数,方法一律用camel标记法,首字母是小写的,能不缩写的都不缩写! 项目名 = 数据库名 ...
- 【原创】Linux基础之去掉windows中的\r
linux换行为\n,windows换行为\r\n,windows环境编辑的shell脚本在linux下执行会报错: line 2: $'\r': command not found 查看 # cat ...
- redis的数据结构及操作命令
一.字符串: redis中最为基础的存储类型,以二进制存储,value的字符串最多512M,Key做多1024字节. 常用命令:赋值(set).取值(get).删除(del),递增(incr/incr ...
- 配置lombok到eclipse上去
使用maven导入lombok.jar包,可以帮助我们省略掉getter/setting方法. 1.pom.xml 添加依赖: <dependency> <groupId>or ...
- Js中去除数组中重复元素的6种方法
方法一: Array.prototype.method1 = function(){ var arr=[]; //定义一个临时数组 for(var i = 0; i < this.length; ...
- HTML5之客户端存储(Storage)
关于客户端存储技术 storage 一.关于客户端(浏览器)存储技术 浏览器的存储技术第一个能想到的应该就是cookie,关于cookie本身出现的初衷是为了解决客户端识别,可存储信息量小(4k左右) ...
- href="javascript:show_login()"意思
整句话意味着当你点击一个超链接时,你会触发函数show_login. Href是一个超链接,通过单击该超链接触发. javascript:后面是JS代码 show_login():表示JS的函数的油烟 ...