import html2canvas from 'html2canvas'
import jpg from '@/assets/1.jpg';
 
 
htmlToImage=(element, callback)=> {
  var width = element.offsetWidth;
  var height = element.offsetHeight;
  var canvas = document.createElement("canvas");
  canvas.width = width ;
  canvas.height = height ;
  var context = canvas.getContext("2d");
  var options = {
    scale: scale,
    canvas: canvas,
    // logging: true,
    width: width,
    height: height,
    taintTest: true, //在渲染前测试图片
    useCORS: true, //貌似与跨域有关,但和allowTaint不能共存
    dpi: window.devicePixelRatio, // window.devicePixelRatio是设备像素比
    background: "#fff",
  };
  html2canvas(element, options).then(function (canvas) {
    var dataURL = canvas.toDataURL('image/jpeg', 0.5); //将图片转为base64, 0-1 表示清晰度
    console.log(dataURL)
    var base64String = dataURL.toString().substring(dataURL.indexOf(",") + 1); //截取base64以便上传
}
 
截图的图片
<img src={jpg} alt="" style={{width:'100%'}} className='aaa'/>
        

点击截取

                 < Button onClick = {
                   () => this.htmlToImage(document.getElementsByClassName("aaa")[0])
                 } > 点击截图 </Button>

关于web网页截图的问题(html2canvas插件)的更多相关文章

  1. html2canvas根据DOM元素样式实现网页截图

    html2canvas是一个相当不错的JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功 能.html2canvas通过获取页面的DOM和元素的样 ...

  2. html2canvas 网页截图 下载 上传

    利用html2canvas插件 对网页截图 并下载和上传图片. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E ...

  3. web网页中使用vlc插件播放相机rtsp流视频

    可参考: 使用vlc播放器做rtsp服务器 使用vlc播放器播放rtsp视频 使用vlc进行二次开发做自己的播放器 vlc功能还是很强大的,有很多的现成的二次开发接口,不需配置太多即可轻松做客户端播放 ...

  4. WEB网页插件 如何实现 选择上传图片路径 【高级问题】

    发表于 2010-10-22 12:11 | |只看楼主       按键精灵程序里面的WEB网页插件 如何实现 选择上传图片路径 我想在上传图片的选框设置图片路径为 C:\fakepath\001. ...

  5. 使用html2canvas实现网页截图,并嵌入到PDF

    使用html2canvas实现网页截图并嵌入到PDF 以前我们只能通过截图工具进行截取图像.这使得在业务生产中,变得越来越不方便.目前的浏览器功能越来越强大,H5也逐渐普及,浏览器也可以实现截图了.这 ...

  6. 推荐几个Web前端开发实用的Chrome插件

    越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录 ...

  7. Web前端开发实用的Chrome插件

    Web前端开发实用的Chrome插件 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录 ...

  8. Web前端开发人员实用Chrome插件收集

    越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录 ...

  9. TI IPNC Web网页之流程分析

    流程 Appro IPNC使用的web服务器是boa. 请仔细理解下面这段话. boa这个web服务器是GUI界面和IPNC应用程序之间的通信的桥梁.它的责任是从web GUI中接收HTTP请求,并且 ...

随机推荐

  1. 第三方MBXPageViewController的使用和注意事项

    GitHub的地址: https://github.com/Moblox/MBXPageViewController 介绍SegmentController的使用: - (void)createSeg ...

  2. Shell编程、part2

    本节内容 1. shell变量简介 2. 定义变量 3. 使用变量 4. 修改变量的值 5. 单引号和双引号的区别 6. 将命令的结果赋值给变量 7. 删除变量 8. 变量类型 9. 特殊变量列表 1 ...

  3. python 并发编程 多线程 GIL全局解释器锁基本概念

    首先需要明确的一点是GIL并不是Python的特性,它是在实现Python解析器(CPython)时所引入的一个概念. 就好比C++是一套语言(语法)标准,但是可以用不同的编译器来编译成可执行代码. ...

  4. Kick Start 2019 Round D

    X or What? 符号约定: $\xor$ 表示异或. popcount($x$) 表示非负整数 $x$ 的二进制表示里数字 1 出现的次数.例如,$13 = 1101_2$,则 popcount ...

  5. 洛谷 P3388 割点(割顶) 题解

    题面:     割点性质:     节点 u 如果是割点,当且仅当存在 u 的一个子树,子树中没有连向 u 的祖先的边(返祖边).     换句话说,如果对于一个点u,它的子节点是v,如果low[v] ...

  6. python正则表达式re 中m.group和m.groups的解释

    转载:http://www.cnblogs.com/kaituorensheng/archive/2012/08/20/2648209.html 先看代码instance: >>> ...

  7. centos7下安装phpmyadmin

    安装环境 在同一台主机上部署LAMP Linux( CentOS 7.3 ) .Apache(httpd2.4).MariaDB(5.5).PHP(7.2) 主机IP:192.168.137.200 ...

  8. msql 事务

    START TRANSACTION      delete from t_emp    delete from t_deptcommit START TRANSACTION delete from t ...

  9. 使用Koa.js离不开这十个中间件

    随着ES6的普及,async/await的语法受到更多JS开发者的青睐,Koa.js作为比较早支持使用该语法的Node框架越来越受到大家的喜爱,虽然Koa.js本身支持的功能很有限,但官方和社区提供了 ...

  10. c# 动态加载和卸载DLL程序集

    原文:c# 动态加载和卸载DLL程序集 在 C++中加载和卸载DLL是一件很容易的事,LoadLibrary和FreeLibrary让你能够轻易的在程序中加载DLL,然后在任何地方卸载.在 C#中我们 ...