html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});

属性参数:

http://html2canvas.hertzen.com/configuration

兼容性:

  兼容安卓与苹果微信浏览器

注意事项:

  如果需要实现长按保存功能,需要注意user-select 设置为auto

  图片地址如果跨域 需要做相应设置

举例使用方式:

  获取saveWrap 容器内的元素 转为canvas ,并将canvas添加到 poster-container 中,再根据这个canvas 转成image,从而可以长按保存


html2canvas(document.getElementById("saveWrapX"),{scale:1}).then(function(canvas) {
document.querySelector('.poster-container').appendChild(canvas);
let canvas = $('.poster-container canvas')
let posterImage = document.getElementById("saveImageX")
posterImage.src = canvas[0].toDataURL("image/jpg")
});

html2canvas 使用指南的更多相关文章

  1. JavaScript权威指南 - 函数

    函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...

  2. UE4新手之编程指南

    虚幻引擎4为程序员提供了两套工具集,可共同使用来加速开发的工作流程. 新的游戏类.Slate和Canvas用户接口元素以及编辑器功能可以使用C++语言来编写,并且在使用Visual Studio 或 ...

  3. JavaScript权威指南 - 对象

    JavaScript对象可以看作是属性的无序集合,每个属性就是一个键值对,可增可删. JavaScript中的所有事物都是对象:字符串.数字.数组.日期,等等. JavaScript对象除了可以保持自 ...

  4. JavaScript权威指南 - 数组

    JavaScript数组是一种特殊类型的对象. JavaScript数组元素可以为任意类型,最大容纳232-1个元素. JavaScript数组是动态的,有新元素添加时,自动更新length属性. J ...

  5. const extern static 终极指南

    const extern static 终极指南 不管是从事哪种语言的开发工作,const extern static 这三个关键字的用法和原理都是我们必须明白的.本文将对此做出非常详细的讲解. co ...

  6. Atitit.研发管理软件公司的软资产列表指南

    Atitit.研发管理软件公司的软资产列表指南 1. Isv模型下的软资产1 2. 实现层面implet1 3. 规范spec层1 4. 法则定律等val层的总结2 1. Isv模型下的软资产 Sof ...

  7. HA 高可用软件系统保养指南

    又过了一年 618,六月是公司一年一度的大促月,一般提前一个月各系统就会减少需求和功能的开发,转而更多去关注系统可用性.稳定性和管控性等方面的非功能需求.大促前的准备工作一般叫作「备战」,可以把线上运 ...

  8. 第六代智能英特尔® 酷睿™ 处理器图形 API 开发人员指南

    欢迎查看第六代智能英特尔® 酷睿™ 处理器图形 API 开发人员指南,该处理器可为开发人员和最终用户提供领先的 CPU 和图形性能增强.各种新特性和功能以及显著提高的性能. 本指南旨在帮助软件开发人员 ...

  9. Visual Studio Code 配置指南

    Visual Studio Code (简称 VS Code)是由微软研发的一款免费.开源的跨平台文本(代码)编辑器.在我看来它是「一款完美的编辑器」. 本文是有关 VS Code 的特性介绍与配置指 ...

随机推荐

  1. Python验证数据的抽样分布类型

    假如要对一份统计数据进行分析,一般其来源来自于社会调研/普查,所以数据不是总体而是一定程度的抽样.对于抽样数据的分析,就可以结合上篇统计量及其抽样分布的内容,判断数据符合哪种分布.使用已知分布特性,可 ...

  2. 带坑使用微信小程序框架WePY组件化开发项目,附带第三方插件使用坑

    纯粹用来记录wepy及相关联内容,以防再犯~ 1. 接手的wepy项目版本是 1.7.2 ,so我没有初始化的过程.... 2. 安装wepy命令工具,npm install wepy-cli -g ...

  3. 修改源码去除zblog博客分类目录的RSS图标

    zblog博客的所建立的分类默认前面是有一个RSS图标的,如下图所示: 其实这个图标的存在并不能起到太大的美化作用,增加用户订阅数量的作用.那么应该如何去掉这个RSS图标呢? 这个RSS图标的生成在z ...

  4. std::list保存大量数据时,类型即是无析构函数,该list析构时会占用大量CPU

    std::list保存大量数据时,类型即是无析构函数,该list析构时会占用大量CPU

  5. Redis之淘汰策略

    Redis 内存数据集大小上升到一定大小的时候,就会进行数据淘汰策略. Redis 提供了 6 种数据淘汰策略: 1. volatile-lru:从已设置过期时间的数据集中挑选最近最少使用的数据淘汰. ...

  6. java 将一个正整数翻译成人民币大写的读法

    程序如下: import java.lang.StringBuffer; /** 给定一个浮点数,将其装换成人民币大写的读法 88.5:捌十捌元零伍角 */ public class Num2Rmb ...

  7. OSCP-Kioptrix2014-1 环境搭建

    环境搭建 该系列文章参考 : https://www.youtube.com/watch?v=bWM0BCQ5q1o&list=PL9WW-prbqvGzHsGK_OqTyYWbCZjucpI ...

  8. django 使用mysql数据库

    一 修改settings里面的配置文件 import pymysql # 一定要添加这两行!通过pip install pymysql! 或者pycharm 里面安装 pymysql.install_ ...

  9. 并发编程:协程TCP、非阻塞IO、多路复用、

    一.线程池实现阻塞IO 二.非阻塞IO模型 三.多路复用,降低CPU占用 四.模拟异步IO 一.线程池实现阻塞IO 线程阻塞IO 客户端 import socket c = socket.socket ...

  10. Centos 安装 kubectl kubelet kubeadm

    cat <<EOF > /etc/yum.repos.d/kubernetes.repo [kubernetes] name=Kubernetes baseurl=https://m ...