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. MyBatis学习存档(1)——入门

    一.简介 MyBatis的前身是iBatis,本是Apache的一个开源的项目 MyBatis是一个数据持久层(ORM)框架,把实体类和SQL语句之间建立了映射关系,是一种半自动化的ORM实现 MyB ...

  2. CentOS7-部署kubernetes

    1 环境准备   节点 主机名 IP OS Master     k8s-master        192.168.57.1       centos 7        Node1  k8s-nod ...

  3. signalfx的中间件监控指标so cool

    signalfx的中间件监控指标so cool www.jianshu.com   对于我们做运维的来说,监控是最基本的东西,不过在初创公司很多计划是跟不上项目架构变化的,项目中会不断加入各种服务和组 ...

  4. 怎样理解Node对象接口

    dom中的节点都继承自Node接口, 也就是说, 所有的节点都具有Node接口所规定的属性和方法, 比如下面这个 <a> 标签, 它也继承了Node的所有属性和方法: 可以认为Node接口 ...

  5. Pycharm 加载pygame解决方案

    按照<python编程从入门到实践>上的教程下载了pygame的whl文件进行安装, 在cmd窗口里import pygame提示无错误,在IDEL里程序也能正常运行, 但是pycharm ...

  6. 【题解】JSOI2008 最大数

    题目描述 现在请求你维护一个数列,要求提供以下两种操作: 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 限制:L不超过当前数列的长度.(L>=0) 插 ...

  7. 如何解决windows 80端口被占用的情况

    window下如果在安装某个软件或者启动tomcat时 会遇到80端口被占用的情况,通过命令 netstat -ano 查看端口被占用情况 找到占用80端口的进程ID,然后我们在任务管理器当中将这个进 ...

  8. MFC 下调试 出现 warning : fail to load indicator string 0x0069

    MFC 下调试 出现 warning : fail to load indicator string 0x0069 就是程序状态栏每一个标识列中至少有一个值没有初始值 或初始值为空 导致程序没有获取到 ...

  9. ztree树id、pid转成children格式的(待整理完整)

    山铝菜单 因为菜单选用了bootstrap treeview ,而格式需要是children类似的格式 var nodes = [ {name: "父节点1", children: ...

  10. ES6入门一:块级作用域(let&const)、spread展开、rest收集

    let声明 const声明 块级作用域 spread/rest 一.let声明与块作用域 在ES6之前,JavaScript中的作用域基本单元就是function.现在有了let就可以创建任意块的声明 ...