HTML2Canvas使用总结
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使用总结的更多相关文章
- 使用html2canvas实现浏览器截图
最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员.最终记录的异常信息如下,上面的[截图报告管理员]就是使用html2canvas前端插件实现的 ...
- java使用代理 html2canvas 截屏 将页面内容生成图片
1.html2canvas 生成图片简单又好用,但涉及到跨域就会出现问题,官方给出的解决办法是设置代理.基本原理就是在后端将图片的数据生成base64再返回给前端使用.使canvas画布分析元素的时候 ...
- 使用html2canvas实现批量生成条形码
/*前台代码*/ <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Generat ...
- 使用html2canvas实现网页截图并嵌入到PDF
以前我们只能通过截图工具进行截取图像.这使得在业务生产中,变得越来越不方便.目前的浏览器功能越来越强大,H5也逐渐普及,浏览器也可以实现截图了.这里来聊下之前在工作中用到的html2canvas.这里 ...
- html2canvas插件对整个网页或者网页某一部分截图并保存为图片
html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏.这个脚本将当前页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现.它不需要来自服务器任何渲染,整 ...
- html2canvas根据DOM元素样式实现网页截图
html2canvas是一个相当不错的JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功 能.html2canvas通过获取页面的DOM和元素的样 ...
- IText&Html2canvas js截图 绘制 导出PDF
Html2canvas JS截图 HTML <div id="divPDF"> 需要截图的区域 </div> JS <script src=" ...
- html2canvas 踩坑总结
需求:将html表格导出为图片,表格可以自己编辑数据,并适配各种屏幕大小.上网搜了下,找到了html2canvas,一开始使用的是最新版0.5.0,最终因为需要支持自定义div编辑框自动换行选择了v0 ...
- html2canvas 网页截图 下载 上传
利用html2canvas插件 对网页截图 并下载和上传图片. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E ...
- html2canvas页面截图图片不显示
前两天在一个群里,有人问使用html2canvas屏幕截图的时候为什么页面的图片不显示只显示了文字,我没有做过屏幕截图的需求,所以不是很清楚,今天稍稍测试了一下. 在github上将html2canv ...
随机推荐
- Laravel-Auth认证
1.建立数据表 admins 2.找到config下的auth.php 文件,加入如下代码 <?php return [ /* |-------------------------------- ...
- nginx 如何访问php文件
1.进入nginx安装路径,我的是/usr/local/nginxvi conf/nginx.conf将 location ~ \.php$ { root html; fastcgi_pass 127 ...
- tensorflow源码解析之distributed_runtime
本篇主要介绍TF的分布式运行时的基本概念.为了对TF的分布式运行机制有一个大致的了解,我们先结合/tensorflow/core/protobuf中的文件给出对TF分布式集群的初步理解,然后介绍/te ...
- tensorflow源码解析系列文章索引
文章索引 framework解析 resource allocator tensor op node kernel graph device function shape_inference 拾遗 c ...
- NETPLIER : 一款基于概率的网络协议逆向工具(一)理论
本文系原创,转载请说明出处:信安科研人 关注微信公众号 信安科研人 获取更多网络安全学术技术资讯 今日介绍一篇发表在2021 NDSS会议上的一项有关协议逆向的工作: @ 目录 1 网络协议逆向工程简 ...
- mybatis——逆向工程中 where (条件1)and (条件2 or 条件3 or 条件4)
where (条件1)and (条件2 or 条件3 or 条件4) = where (条件1 and 条件2)or (条件1 and 条件3) or (条件1 and 条件4) 结果 是这样的 WH ...
- web服务器-Nginx URL重写
web服务器-Nginx URL重写 一. URL重写介绍 和apache等web服务软件一样,rewrite的主要功能是实现URL地址的重定向.Nginx的rewrite功能需要PCRE软件的支持, ...
- python中判断为None
python中经常会有判断一个变量是否为None的情况,这里列举三种方式: if not x if x is None if not x is None *********************** ...
- 解决福大aTrust深信服无法访问部分页面的问题
如果你原先使用过天融信,hosts里会留下 #################################################### Add by VONE SSL VPN Clien ...
- OpenCV开发笔记(七十四):OpenCV3.4.1+ffmpeg3.4.8交叉编译移植到海思平台Hi35xx平台
前言 移植opencv到海思平台,opencv支持对视频进行解码,需要对应的ffmpeg支持. Ffmpeg的移植 Ffmpeg的移植请参考之前的文章:<FFmpeg开发笔记(十): ...