html2canvas官网地址:http://html2canvas.hertzen.com/

github地址:https://github.com/niklasvh/html2canvas/

从官网可以看出它的使用方法很容易:

项目中的需求是需要将2张图片(1背景图+2生成的二维码)和1段文字(3店铺的名称)整体合成一张图片,看下面的图片应该有助于理解:

动态图如下:

我们可以看出,在使用过程中,需要合成图片的那段代码是隐藏的。这时,有个问题就是隐藏的代码是无法生成截图的。最开始是想从js下手,自身能力有限,做不到让它在隐藏的情况下截图。转念可以从css下手。我们要达到的效果无非就是让这一块区域看不见,脱离文档流,不占空间。我相信通过我这样描述,大家可能知道该如何做了。

就是我们把那一块需要生成截图的区域样式设置为{position:fixed;opacity:0;},然后在生成截图之后把这段代码给移除掉。为了用户体验更好,我们可以在生成图片的时候中间加一个过渡的动画。等图片生成完之后将过渡动画移除掉。大概思路就是这样子了,如果我的文字描述还是让你一脸懵逼的话,直接看下面的截图:

整体截图及说明如下:

HTML截图如下:

主要CSS截图如下:

主要js代码如下:

把a链接加一个download的属性就可以实现点击直接下载该图片了。

给能看到结尾的你点个赞。在写的过程中,感觉都不知道自己要如何把事情给描述清楚明白。。。要说的就这些了~希望能帮到各位看官~~如有疑问欢迎留言,若有更好的方法,希望各位不吝赐教哇~~

html2canvas如何在元素隐藏的情况下生成截图的更多相关文章

  1. PHP一般情况下生成的缩略图都比较不理想

    PHP用GD库生成高质量的缩略图片,PHP一般情况下生成的缩略图都比较不理想.今天试用PHP,GD库来生成缩略图.虽然并不100%完美.可是也应该可以满足缩略图的要求了.<?php $FILEN ...

  2. 分库分表的情况下生成全局唯一的ID

    分库分表情况下 跨库的问题怎么解决? 分布式事务怎么解决? 查询结果集集合合并的问题? 全局唯一的id怎么解决? 一般要求:1.保证生成的ID全局唯一,不可重复 2.生成的后一个Id必须大于前一个Id ...

  3. C++在数组元素个数未知情况下声明数组

    我们都从书上学习的方法,定义一个数组需要数组名.类型以及数组元素个数,一般定义必须明确元素的个数,否则无法通过编译. 1. int a[]; 2. int n; int a[n]; 就想上面这两种情况 ...

  4. Qt 实现在隐藏标题栏情况下,窗口的缩放(未成功)

    呃,这是一个悲剧的版本,在这版本中,我按照网上大神的说法,试了一下,但是没有效果,不知道出错在了那里,和昨天一样,也是,没有理想的效果,这里贴上代码,记录一下 资料连接:放评论 需要包含头文件 #in ...

  5. 编写高质量代码改善C#程序的157个建议:第17个建议之多数情况下使用foreach进行循环遍历

    今天是我看<编写高质量代码:改善C#程序的157个建议>第二遍的时候了,看完这本书的确是受益匪浅,学到了很多东西,也明白了很多道理. 里面的代码我每个都调试了一遍,有时候是有些出入的,可能 ...

  6. 同一容器中a标签比较多的情况下通过title属性值隐藏

    同一容器中a标签比较多的情况下如何通过title属性值控制a标签的隐藏或显示 最近项目中遇到一个IE兼容性问题,网站需要在底部footer添加"站长统计"代码,容器中动态添加很多a ...

  7. OC JS交互(通常情况下,如果网页写得正规的话,是可以正常交互的,之前就遇到后台写h5始终拿不到事件,元素也拿不到,更别说交互了,真是奇了怪了)

    自动填充表单 @"document.getElementById('loginid').value = '这里填入你的用户名';document.getElementById('userpa ...

  8. 单链表在不知头结点的情况下对第i个元素的删除

    一.首先,看看单链表中第i个元素的删除: Status ListDelete_L (LinkList &L,int i,ElemType &e){ //在带头结点的单链表L中,删除第i ...

  9. div元素宽度不定的情况下如何居中显示

    最近由于工作的原因碰到一个问题,就是在一个弹窗宽度不定的情况下还能是该弹窗居中显示,思考许久未找到合适办法,于是在网上找到一些办法在此总结记录下来方便以后的学习. 方法一:兼容IE67 <div ...

随机推荐

  1. 粒子拼字效果(getImageData方法)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. mysqli预处理和事务处理

    1 应用环境 mysqli预处理功能(大量数据处理时使用) 2 步骤 a)mysqli连接数据库 $mysqli = new mysqli('localhost','root','root','chu ...

  3. 创建一个hibernate helloword

    1.下载hibernate包 http://hibernate.org/orm/ 点download下载最终版 安装hibernate插件hibernatetools 2.创建一个java工程 导入必 ...

  4. C/C++中程序在使用堆内存时的内存复用问题

    在一个C/C++程序中,如果使用了堆内存的管理机制,那么内存究竟是怎么分配与回收的呢? 先看一个程序: #include <iostream> using namespace std; i ...

  5. iOS: NSMutableArray的方法removeObject:inRange:

    - (void)removeObject:(id)anObject inRange:(NSRange)aRange

  6. MySql 如何实现不同数据库同步【2个】

    环境要求: Windows 操作系统 需要Mysql 3.23.15以后的版本. 假设数据库A为主机,数据库B为从机(A向B提供同步服务,即B中的数据来自A) A机器:IP=10.10.151.166 ...

  7. Webappbuilder开发快速预览

    Webappbuilder开发快速预览 by 李远祥 Webappbuilder for ArcGIS 是由ArcGIS JavaScripit API和dojo创建的,它允许通过创建自己的widge ...

  8. ArcSDE

    ArcSDE,即数据通路,是ArcGIS的空间数据引擎,它是在关系数据库管理系统(RDBMS)中存储和管理多用户空间数据库的通路.从空间数据管理的角度看,ArcSDE是一个连续的空间数据模型,借助这一 ...

  9. linux的基本操作(磁盘管理)

    磁盘管理 [查看磁盘或者目录的容量 df 和 du] df 查看已挂载磁盘的总容量.使用容量.剩余容量等,可以不加任何参数,默认是按k为单位显示的 df常用参数有 –i -h -k –m等 -i 使用 ...

  10. 重写MFC窗口上的关闭按钮事件(SDI, MDI, Dialog)

    This piece of code demonstrate how to override WM_CLOSE event. 点击窗口关闭按钮,触发相关事件! 有时候,在MFC程序退出之前,我们通常会 ...