1:指定要生成的DOM元素id

2: 某些图片动态赋值src的url或者base64可能不会被立即渲染;可以设置一个定时器解决

3:可以调用次方法得到的canvas元素转一下格式 png/jpg

4: uniapp中使用时scale设定4倍移动端不模糊

5: 线上图片需要后端设置允许跨域访问

var copyDom = document.querySelector('#sxh');
const width = copyDom.offsetWidth;
const height = copyDom.offsetHeight;
let scale = 4; // 设定倍数这样不会模糊
html2canvas(copyDom, {
width:width,
heigth:height,
windowHeight:height,
windowWidth:width,
scale:scale,
scrollX:0,
scrollY:0,
y:0,
useCORS: true,
// allowTaint: true,
// backgroundColor:"#2ab77d",
}).then((canvas) => {
var url = canvas.toDataURL("image/png", 1.0).replace("image/png","image/octet-stream");//图片地址

HTML2Canvas使用总结的更多相关文章

  1. 使用html2canvas实现浏览器截图

    最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员.最终记录的异常信息如下,上面的[截图报告管理员]就是使用html2canvas前端插件实现的 ...

  2. java使用代理 html2canvas 截屏 将页面内容生成图片

    1.html2canvas 生成图片简单又好用,但涉及到跨域就会出现问题,官方给出的解决办法是设置代理.基本原理就是在后端将图片的数据生成base64再返回给前端使用.使canvas画布分析元素的时候 ...

  3. 使用html2canvas实现批量生成条形码

    /*前台代码*/ <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Generat ...

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

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

  5. html2canvas插件对整个网页或者网页某一部分截图并保存为图片

    html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏.这个脚本将当前页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现.它不需要来自服务器任何渲染,整 ...

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

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

  7. IText&Html2canvas js截图 绘制 导出PDF

    Html2canvas JS截图 HTML <div id="divPDF"> 需要截图的区域 </div> JS <script src=" ...

  8. html2canvas 踩坑总结

    需求:将html表格导出为图片,表格可以自己编辑数据,并适配各种屏幕大小.上网搜了下,找到了html2canvas,一开始使用的是最新版0.5.0,最终因为需要支持自定义div编辑框自动换行选择了v0 ...

  9. html2canvas 网页截图 下载 上传

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

  10. html2canvas页面截图图片不显示

    前两天在一个群里,有人问使用html2canvas屏幕截图的时候为什么页面的图片不显示只显示了文字,我没有做过屏幕截图的需求,所以不是很清楚,今天稍稍测试了一下. 在github上将html2canv ...

随机推荐

  1. laravel7 权限菜单设置简易升缩

    1:数据库填写数据,pid=0为顶级菜单,pid=对应的id为顶级菜单的子菜单 2:laravel7 创建模型并链接对应的表名 <?php namespace App\models; use I ...

  2. java多线程中常用指令

    ------------恢复内容开始------------ 一.写在前面 好久没写博客了,这不快毕业了,应该会重新开始更新博客了.这次主要介绍查看线程状态等一系列常见指令,包括有jps.vmstat ...

  3. Casbin入选2022 Google编程之夏

    Casbin入选2022 Google编程之夏! Google编程之夏(Google Summer of Code,GSoC),是由Google公司所主办的年度开源程序设计项目,第一届从2005年开始 ...

  4. Wireshark DTN解析器拒绝服务漏洞

    受影响系统:Wireshark Wireshark 2.2.0 - 2.2.1Wireshark Wireshark 2.0.0 - 2.0.7描述:CVE(CAN) ID: CVE-2016-937 ...

  5. MyEclipse 05_连接mysql数据库进行增删改查

    例子: 1.在数据库中建立如下表 2. 在MyEclipse里按本主博客文MyEclipse 03_jdbc连接数据库,注意数据库名要一致  运行后在Navicat里如下: 代码如下: package ...

  6. [SPDK/NVMe存储技术分析]015 - 理解内存注册(Memory Registration)

    使用RDMA, 必然关系到内存区域(Memory Region)的注册问题.在本文中,我们将以mlx5 HCA卡为例回答如下几个问题: 为什么需要注册内存区域? 注册内存区域有嘛好处? 注册内存区域的 ...

  7. TetBrains产品快捷键大全

     快捷键大全

  8. 实现一个函数功能:sum(1,2,3,4..n)转化为 sum(1)(2)(3)(4)…(n)?

    // 使用柯里化 + 递归function curry ( fn ) {  var c = (...arg) => (fn.length === arg.length) ?           ...

  9. Replicated State Machine和WAL

    在阅读raft论文的时候,考虑两个问题: 为什么要用Replicated State Machine?没有其他方式吗 为什么要先写日志再应用到Replicated State Machine,直接应用 ...

  10. Linux重启网卡服务Failed to start LSB: Bring up/down networking.

    Linux网卡重启失败,使用 systemctl status network.service命令进行查看状态,发现启动有异常产生 network.service: control process e ...