使用 html2canvas 实现截屏,以及踩坑过程

wap手机移动端有个需求,对手机端动态生成数据的一个页面,实现截屏,并且长按保存到相册。百度了一下资料,参考了以下文章:

1、https://www.hangge.com/blog/cache/detail_2211.html#

2、https://blog.csdn.net/torrent0318/article/details/83055085

3、https://www.jianshu.com/p/069739d33e02

第1个链接,入门教程,很详细,基本介绍、基本用法,让你简单上手。

第2,3链接,主要解决 遇到的坑

原文地址:https://www.cnblogs.com/l-y-q/p/12065819.html

时间: 2024-10-03 01:15:16

使用 html2canvas 实现截屏,以及踩坑过程的相关文章

html2canvas.js截屏并上传到后台

$("#example1").on("click",function(event){ if(confirm("是否上传")){ event.preventDefault(); html2canvas($(".jiBMsg"), { crossDomain: true, xhrFields: {withCredentials: true}, allowTaint: true, taintTest: false, backgrou

html2canvas+Canvas2Image分享海报功能踩坑

首先需要 import html2canvas from 'html2canvas'; import {Canvas2Image} from '../../assets/js/plug/canvas2image.js'; getBase64Image(data) { let that = this; var canvas = document.createElement("canvas"); canvas.width = $(data.dom).width(); canvas.heig

Nginx location 配置踩坑过程分享

这是五个小时与一个字符的战斗 是的,作为一个程序员,你往往发现,有的时候你花费了数小时,数天,甚至数星期来查找问题,但最终可能只花费了数秒,改动了数行,甚至几个字符就解决了问题.这次给大家分享一个困扰了我很久,我花了五个小时才查找出问题原因,最终只添加了一个字符解决了的问题. 问题描述 我们的业务系统比较复杂,但最终提供给用户的访问接口比较单一,都是使用 Nginx 来做一个代理转发,而这个代理转发,往往需要匹配很多种不同类型的 URL 转给不同的服务.这就使得我们的 Nginx 配置文件变得很

Nginx location 配置踩坑过程

原文链接:https://blog.coding.net/blog/tips-in-configuring-Nginx-location 是的,作为一个程序员,你往往发现,有的时候你花费了数小时,数天,甚至数星期来查找问题,但最终可能只花费了数秒,改动了数行,甚至几个字符就解决了问题.这次给大家分享一个困扰了我很久,我花了五个小时才查找出问题原因,最终只添加了一个字符解决了的问题. 问题描述 我们的业务系统比较复杂,但最终提供给用户的访问接口比较单一,都是使用 Nginx 来做一个代理转发,而这

Linux 踩坑过程

1.装虚拟机(Windows自带的Hyper-V 坑爹,用VMware虚拟机安装ubuntuOK ,前提是要把Hyper-v 干掉) 2.filezilla 连接 ubuntu 连接不上(耗时最长) 2.1.切换到root 用户登录(sudo passwd root input your password for current user: enter new unix password retype new unix password su root ) 2.2.ssh服务未安装(sudo a

pycharm+PyQt5+python最新开发环境配置,踩坑过程详解

Python 3.6https://www.python.org/downloads/windows/========================================PyQt5 pip3 install  PyQt5 -i https://pypi.tuna.tsinghua.edu.cn/simple 安装图形界面开发工具Qt Designerpip3 install  PyQt5-tools -i https://pypi.tuna.tsinghua.edu.cn/simpl

基于consul的服务注册(含踩坑过程)

在本地的一个案例中进行修改 修改微服务的相关pom文件修改每个微服务的pom文件,添加SpringCloud提供的基于Consul的依赖 <!--SpringCloud提供的基于Consul的服务发现--> <dependency>       <groupId>org.springframework.cloud</groupId>       <artifactId>spring-cloud-starter-consul-discovery&l

html2canvas的踩坑之路

html2canvas的踩坑之路 前言 早有耳闻这个html2canvas比较坑,但无奈于产品需求的压迫,必须实现html转图片的功能,自此走上了填坑之路,好在最后的效果还算令人满意,这才没有误了产品上线周期. html2canvas介绍 html2canvas的详细介绍可以点击这里查看,其实简单来说就是通过canvas将HTML生成的DOM节点绘制到画布上,再可以通过自己的需求转换成图片.所以官方文档也说了,最后生成的效果不是100%相同的,这一点大家要有心理准备,无论怎样,一点点小瑕疵是肯定

【踩坑经历】一次Asp.NET小网站部署踩坑和解决经历

2013年给1个大学的小客户部署过一个小型的Asp.NET网站,非常小,用的sqlite数据库,今年人家说要换台服务器,要重新部署一下,好吧,虽然早就过了服务时间,但无奈谁叫人家是客户了,二话不说,上,源代码和以前的文件都有,部署还不是分分钟的事情,打开IIS挂上去就行了.谁知道,这个部署将近花了2天的时间.看看踩坑过程和解决方法. 本文原文地址:http://www.cnblogs.com/asxinyu/p/4380380.html 1.居然拿XP系统做服务器 第一个坑其实和我没关系,客户以