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. LGP5430题解

    新的 \(O(k+\log n)\) 做法. 考虑计算每个猴子对答案的贡献. 打个表: 1 1 2 4 8 16 32 ... 可以看出第 $ i $ 个猴子对答案的贡献是 \(i^k \times ...

  2. SourceTree代码变更和FoxMail邮件管理(效率小计俩)

    代码变更溯源 工作时,我们经常会想要查看一个类文件的变更历史,最常见的场景是:"卧槽,谁改了我的代码" 新版本的Xcode溯源自我感觉相当难用,所以这里我们介绍一个工具 Sourc ...

  3. 商品模型:SPU、商品、SKU概念模型设计

    商品系统是电商SaaS.新零售SaaS最基础.最核心的系统之一.商品系统几乎需要支撑所有业务系统,商品详情.购物车.订单.履约.结算.售后.库存.供应链等,都需要依赖商品系统的能力.为了保障业务的稳定 ...

  4. VUE3 之 列表动画 - 这个系列的教程通俗易懂,适合新手

    1. 概述 老话说的好:可以为别人解决痛点的产品就是好产品. 言归正传,今天我们来聊聊 VUE 的列表动画. 2. 列表动画 2.1  列表中增加和删除元素 <style> .my-ite ...

  5. Play商店显示需要进行身份认证。您需要登录自己的Google帐户

    前段时间把一加6系统从H2OS换到OxygenOS,Play商店死活不能登录,网络配置等问题已经排除,重装Google全家桶也没有解决问题,最后找到原因. 解决办法:在应用列表中找到Google Pl ...

  6. Python函数-5 生成器

    生成器有时候,序列或集合内的元素的个数非常巨大,如果全制造出来并放入内存,对计算机的压力是非常大的.比如,假设需要获取一个10**20次方如此巨大的数据序列,把每一个数都生成出来,并放在一个内存的列表 ...

  7. 5月14日 python学习总结 视图、触发器、事务、存储过程、函数、流程控制、索引

    一.视图 1.什么是视图 视图就是通过查询得到一张虚拟表,然后保存下来,下次用的直接使用即可 2.为什么要用视图 如果要频繁使用一张虚拟表,可以不用重复查询 3.如何用视图 create view t ...

  8. 有标号DAG计数(生成函数)

    有标号DAG计数(生成函数) luogu 题解时间 首先考虑暴力,很容易得出 $ f[ i ] = \sum\limits_{ j = 1 }^{ i } ( -1 )^{ j - 1 } \bino ...

  9. 解决Flash CS6初始化字体就自动退出

    系统win7 问题始于安装了同事的字体,启动Flash CS6时界面上显示开始初始化字体...然后 就自动退出了 尝试过进入pe系统删除字体,可是删除不了 网上搜索找到了这一个删除字体的工具FontF ...

  10. TreeMap与TreeSet的源码分析

    1.TreeMap源码 1.属性部分: private final Comparator<? super K> comparator;//比较器 private transient Ent ...