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 ...
随机推荐
- 「java.util.concurrent并发包」之 CyclicBarrier
一 描述 CyclicBarrier初始化时规定一个数目,然后计算调用了CyclicBarrier.await()进入等待的线程数.当线程数达到了这个数目时,所有进入等待状态的线程被唤醒并继续.Cyc ...
- PHP数组和对象之间的互换
今天在和前端对接接口的时候,从后台返回数据给前端的时候出现如下JSON格式数据 "goods": [ { "id": "dEQ144800584Lx& ...
- mysql索引不生效
公司服务用的mysql,最近在查询时时间很慢,经常会上10多秒,查看了一下查询的执行计划,发现索引没有生效. 存储引擎使用InnoDB. 一开始在主库查询,一直很好奇为什么索引不生效,切换到备库之后, ...
- 数据库连接池的sqlhelper
import pymysql import threading from DBUtils.PooledDB import PooledDB """ storage = { ...
- python模块-paramiko-修改源码(demo实例)
在github上下载一个paramiko,找到demos目录,复制到pycharm项目里面 这是因为python3传来得数据是bates数据类型,需要decode()一下就可以,在demos下得int ...
- 你懂什么是分布式系统吗?Redis分布式锁都不会?
分布式系统涉及到很多的技术.理论与协议,很多人也说,分布式系统是“入门容易,深入难”,有一些人简历上写着熟悉分布式系统,很多人都是管中窥豹只见一斑. 究竟什么是分布式系统? 分布式系统是由一组通过网络 ...
- Kafka网络模型
摘要:很多人喜欢把RocketMQ与Kafka做对比,其实这两款消息队列的网络通信层还是比较相似的,本文就为大家简要地介绍下Kafka的NIO网络通信模型,通过对Kafka源码的分析来简述其React ...
- imx8移植opencv(3.0以上版本)笔记
基本步骤参考我同事的博客:https://blog.csdn.net/hunzhangzui9837/article/details/89846928 以下是在移植到imx8平台时的笔记和遇到的问题及 ...
- c#连接Java后台,处理返回的数据
首先定义共通文件,根据url连接Java后台 class ConntectUtil { public JObject ConsoleApplication(string appID, CustomDa ...
- mvc验证码图片生成
/// <summary> ///生成验证码 /// </summary> public class VerifyCode { /// <summary> /// ...