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

下载    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中点击按钮自动截图并下载图片的更多相关文章

  1. vue中点击按钮复制内容

    <el-button type="primary" round size="mini" @click="copyUrl">复制u ...

  2. Vue点击按钮下载对应图片

    最近有用到点击某个按钮 自动下载对应图片,可是对于浏览器不同的问题,会有‘个别’浏览器出现不能下载的或者下载的效果不同等的问题, 可以直接用创建canvas方法: 定义图片地址Img: "w ...

  3. vue中点击空白处隐藏弹框(用指令优雅地实现)

    在写vue的项目的时候,弹框经常性出现,并要求点击弹框外面,关闭弹框,那么如何实现呢?且听我一一...不了,能实现效果就好 <template> <div> <div c ...

  4. 解决IE浏览器中点击按钮上传无效的问题

    前几天写了上传功能,点击按钮上传,在谷歌中是没有任何问题的: 但是在IE浏览器中点击没有任何效果 源代码如下:  后来发现在Firefox.IE浏览器中button标签内部可以含有其他标签,但是不能对 ...

  5. VB.Net中点击按钮(Button)会重复提交两次表单

    在VB.NET程序开发过程中遇到一个问题 提交一个表单时,button的html代码如下 <asp:Button ID="btnSubmit" OnClick="c ...

  6. electron-vue中点击按钮,实现打开程序目录里面的某个文件

    设计到的知识点: explorer.exe /select 打开文件夹并把焦点放到指定文件 nodejs中的process模块--child_process.exec 我这里是根据需求,点击按钮后打开 ...

  7. 点击按钮每次都能实现图片的旋转和切换(swift)

    效果如图: 代码如下: // // ViewController.swift // TwoSidedView // // Created by mayl on 2017/12/14. // Copyr ...

  8. vue中点击复制粘贴功能

    1.下载clipboard.js cnpm install clipboard --save 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 import Clipboard fro ...

  9. vue 点击按钮弹窗,点击关闭按钮关闭弹窗。

    <div @click="btnfc()">点击弹窗按钮</div> <div v-show="show"> <div ...

随机推荐

  1. Idea 控制台Tomcat乱码设置

    找到tomcat安装目录,进入conf目录,找到logging.properties文件 把默认的 java.util.logging.ConsoleHandler.encoding = UTF-8 ...

  2. 倍增-RMQ问题Sparse-Table算法

       提示 code: #include<bits/stdc++.h> #define ll long long #define inf 0x7fffffff using namespac ...

  3. Java回调实现异步 (转)

    出处: Java回调实现异步 在正常的业务中使用同步线程,如果服务器每处理一个请求,就创建一个线程的话,会对服务器的资源造成浪费.因为这些线程可能会浪费时间在等待网络传输,等待数据库连接等其他事情上, ...

  4. Mysql-Sqlalchemy-ORM-many_to_many

    orm_m2m.py from sqlalchemy import Table,Column,Integer,String,DATE, ForeignKey from sqlalchemy.orm i ...

  5. CentOS7 Python3上安装paramiko

    1. CentOS 7下安装Python3.5 CentOS7默认安装了python2.7.5,要用 Python3需要自己手动安装.注意不要删除python2. 1.1 下载python3源码包 w ...

  6. Java EE javax.servlet中的RequestDispatcher接口

    RequestDispatcher接口 public interface RequestDispatcher 一.介绍 定义一个对象,从客户端接收请求并将其发送到服务器上的任何资源(例如servlet ...

  7. 【原创】大数据基础之Logstash(6)mongo input

    logstash input插件之mongodb是第三方的,配置如下: input { mongodb { uri => 'mongodb://mongo_server:27017/db' pl ...

  8. python 列表反转

    反转: 将原列表反转,返回None: li = [1, 2, 3]li.reverse()print(li)# [3, 2, 1]1234不改变原列表,返回反转后的新列表: li = [1, 2, 3 ...

  9. 打印从1到最大的n位数(考虑大数问题)

    void Print1ToMaxOfNDigits(int n) { if(n <= 0) { return; } int * number = new int[n]; for(int i = ...

  10. 05 正确运行一个Go程序

    Go代码文件,程序中必须指定启动函数main() Hello.go package main //声明为main包,即可以编译成二进制程序 import "fmt" //导入fmt ...