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. netty系列之:netty中各不同种类的channel详解

    目录 简介 ServerChannel和它的类型 Epoll和Kqueue AbstractServerChannel ServerSocketChannel ServerDomainSocketCh ...

  2. 比较 Java 静态工厂方法与构造函数

    1 什么是静态工厂方法 Java 静态工厂方法是在方法前加上 public static,让这个方法变为公开.静态的方法.该方法返回该类的一个实例,就好像一个工厂生产出一个产品.所以称之为静态工厂方法 ...

  3. 初学者都能学会的ElasticSearch入门实战

    大家好,我是咔咔 不期速成,日拱一卒 项目中准备使用ElasticSearch,之前只是对ElasticSearch有过简单的了解没有系统的学习,本系列文章将从基础的学习再到深入的使用. 咔咔之前写了 ...

  4. 5月8日 python学习总结 mysql 建表操作

    一 .创建表的完整语法 create table 表名( 字段名1 类型[(宽度) 约束条件],字段名2 类型[(宽度) 约束条件],字段名3 类型[(宽度) 约束条件]); 解释: 类型:使用限制字 ...

  5. Python库国内镜像

    中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/ http://pypi.mirrors.ustc.edu.cn/simple/ 豆瓣 http://py ...

  6. FOC软件中要处理的问题

    1. 电流采样时间及通道 FOC需要通过采集相电流来进行控制,采样时间及通道极为关键,在二或三电阻采样方案中,采用如下方式: 在1.6扇区,B.C为采样通道: 在2.3扇区,A.C为采样通道: 在4. ...

  7. 现代中央处理器(CPU)是怎样进行分支预测的?

    人们一直追求CPU分支预测的准确率,论文Simultaneous Subordinate Microthreading (SSMT)中给了一组数据,如果分支预测的准确率是100%,大多数应用的IPC会 ...

  8. 为MySQL加锁?

    在日常操作中,UPDATE.INSERT.DELETE InnoDB会自动给涉及的数据集加排他锁,一般的 SELECT 一般是不加任何锁的.我们可以使用以下方式显示的为 SELECT 加锁. 共享锁: ...

  9. (转)String,StringBuilder,StringBuffer区别

    Java中的String,StringBuilder,StringBuffer三者的区别 注:转自-博客园-酥风 最近在学习Java的时候,遇到了这样一个问题,就是String,StringBuild ...

  10. Spring Boot 的核心注解是哪个?它主要由哪几个注解组成的?

    启动类上面的注解是@SpringBootApplication,它也是 Spring Boot 的核心注解,主要组合包含了以下 3 个注解: @SpringBootConfiguration:组合了 ...