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. 网易云课堂_C++程序设计入门(下)_期末考试_期末考试在线编程题目

    期末考试在线编程题目 返回考试   本次考试题目一共两个,在考试期间可以不限制次数地提交 温馨提示: 1.本次考试属于Online Judge题目,提交后由系统即时判分. 2.学生可以在考试截止时间 ...

  2. 定位网页元素、透明度、z-index、包裹性和破坏性

    一.定位 position属性————规定元素的定位类型,即元素脱离文档流的布局,在页面的任意位置显示 也可以参见以前的总结 <—— 戳 static:默认值,没有定位 relative:相对定 ...

  3. 2019JAVA第四次实验报告

    JAVA实验报告 班级 计科二班 学号 20188442 姓名 吴怡君 完成时间 2019/9/29 评分等级 实验四 类的继承 1.实验目的 掌握类的继承方法: 变量的继承和覆盖,方法的继承.重载和 ...

  4. 使用自定义View

    1 关于自定义的View的构造函数 java中对构造函数只是调用,不继承.因为整个UI是android系统提供的框架,因此构造函数需要写成它要求的格式,即和View的构造函数一样. 自定义的View中 ...

  5. Spring的核心思想,总结得非常好!

    依赖注入是面型接口编程的一种体现,是Spring的核心思想.事实上依赖注入并不是什么高深的技术, 只是被Sping这么以包装就显得有些神秘. 如上代码清单所示,Coder使用Java语言打印hello ...

  6. springboot2.0处理自定义异常始终返回json

    1. 编写自定义异常类 package cn.jfjb.crud.exception; /** * @author john * @date 2019/11/24 - 9:48 */ public c ...

  7. VeryNginx中文文档

    VeryNginx VeryNginx 是一个功能强大而对人类友好的 Nginx 扩展程序. 提示 v0.2` 版本之后,控制台入口被移动到了 `/verynginx/index.html 中文控制台 ...

  8. 出大问题!webpack 多入口&&html模板在后端

    新公司前后端不分离,后端用的是php的twig 我用webpack做多入口文件的打包,虽然成功了.但是引入js和css是在twig上写死的根据文件名. 一开始没问题,因为就定死了那么几个global. ...

  9. sql server 对数运算函数log(x)和log10(x)

    --LOG(x)返回x的自然对数,x相对于基数e的对数 --LOG10(x)返回x的基数为10的对数 示例:select LOG(3),LOG(6),LOG10(1),LOG10(100),LOG10 ...

  10. c#EntityFrameworkcodeFirst模式

    一.首先定义数据类 [DataContract(Namespace="http://www.cninnovation.com/Services/2012")]  public cl ...