近两年做了几次微信H5活动的开发,为了达到传播分享的效果,通常最终都需要生成个性化的图片,供用户长按保存分享,在这里就把自己的一些使用心得记录下来,供其他小伙伴借鉴。

这里备注一下,我目前用的是  html2canvas 0.5.0-beta4 版本,这篇文章也以它为例,先贴一下代码

 
   
let canvas = document.createElement('canvas');
let cardBox = document.querySelector("#imgBox");
let w=cardBox.offsetWidth;
let h=cardBox.offsetHeight;
let scale=3;
canvas.width = w*scale;
canvas.height = h*scale;
canvas.style.width=w+"px";
canvas.style.height=h+"px";
let context = canvas.getContext("2d");
context.scale(scale,scale);
let rect = cardBox.getBoundingClientRect();//获取元素相对于视察的偏移量
context.translate(-rect.left,-rect.top);//设置context位置,值为相对于视窗的偏移量负值,让图片复位
html2canvas(cardBox, {
canvas: canvas,
scale: scale,
dpi:1,
width:w,
height:h,
}).then((canvas)=> {
var dataUrl = canvas.toDataURL();
      //这个dataUrl就是生成图片的base64编码了
});

  

1.图片模糊的问题

  这个问题很常见,造成的原因也是有多个的,首先就是上图代码中声明的 scale 参数,通过这个参数控制画布的缩放,可以增加图片的清晰度,但是太高也会有问题,会导致图片太大,以及超过屏幕分辨率而出现色彩斑点,因此找到一个比较合适的比例就好;

  另一个常见的原因就是在需要生成为图片的html中,一些原本就是图片的元素,最好使用img标签去加载他,而不是用作背景图。

2.图片跨域

  我们在生成的图片中经常会用到当前用户的头像,这个头像是微信那边返回的一个url,如果直接把他通过img标签放在html里面,会发现最终生成的图片没有头像,这是因为canvas的浏览器安全协议阻止了这个行为,这个目前没找到办法在前端去解决,我一般是让后端讲这个图片转为base64以后传给我,这样就像是本地资源一样,便不会有跨域问题了。

3.图片中的元素位置发生偏移

  经过一些对比,我发现生成的图片中一些元素相对于html的位置发生了细小的偏移,后来在网上找到了解决方法

 let rect = cardBox.getBoundingClientRect();//获取元素相对于视察的偏移量
context.translate(-rect.left,-rect.top);//设置context位置,值为相对于视窗的偏移量负值,让图片复位

  就是通过以上两行代码,在canvas中绘制html元素时,会纠正元素的偏移问题。

4.如何实现长按保存

  因为微信浏览器中的图片标签,经过长按以后会触发浏览器的事件,弹出保存和分享等菜单栏,因此在微信中只要你将最终生成的图片放在手指可以操作的地方,然后提示用户长按就好。不过通常我是讲生成后的图片加载为img后通过相对定位覆盖在需要生成为图片的那个div上面,最好透明度设置为0,这样生成的那一瞬间也没有突然变化的效果,用户体验会更好一些,用户对着那个div长按,实际则是按到了覆盖在上面的img,微信浏览器就会弹出菜单栏,用户便可以保存或者分享了。

html2canvas使用心得的更多相关文章

  1. 我的MYSQL学习心得(一) 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  2. NoSql数据库使用半年后在设计上面的一些心得

    NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...

  3. 我的MYSQL学习心得(二) 数据类型宽度

    我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  4. 我的MYSQL学习心得(三) 查看字段长度

    我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  5. 我的MYSQL学习心得(四) 数据类型

    我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(五) 运 ...

  6. 我的MYSQL学习心得(五) 运算符

    我的MYSQL学习心得(五) 运算符 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  7. 我的MYSQL学习心得(六) 函数

    我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

  8. 我的MYSQL学习心得(七) 查询

    我的MYSQL学习心得(七) 查询 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

  9. 我的MYSQL学习心得(八) 插入 更新 删除

    我的MYSQL学习心得(八) 插入 更新 删除 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得( ...

随机推荐

  1. BRT快速公交系统的可视化实践

    前言 随着城市进程的加快,中国城市机动车的数量飞速增长,造成城市交通拥堵问题越来越严重,城市居民对于改善出行条件的需求尤其是公共交通的便捷性问题也越来越迫切.而BRT(快速公交系统)作为一种新型的客运 ...

  2. webbug3.0菜鸟笔记1

    渗透学习笔记--基础篇--sql注入(字符型)http://bbs.51cto.com/viewthread.php?tid=1148930 渗透学习笔记--基础篇--sql注入(数字型)http:/ ...

  3. 关于ABBYY的常见问题与解答

    问:ABBYY的版本那么多,我不知道哪款是我需要的.可不可以帮助我选择? 答:您可在此查看不同版本的功能介绍与版本对比,选择适合自己的版本即可. 查看ABBYY FineReader 15功能:查看A ...

  4. leetcode151. 翻转字符串里的单词

    给定一个字符串,逐个翻转字符串中的每个单词. 示例 1:输入: "the sky is blue"输出: "blue is sky the"示例 2:输入: & ...

  5. python接口测试3-JSON格式

    什么是JSON? 一种轻量级的数据交换格式.它独立于语言和平台,JSON解析器和JSON库支持不同的编程语言.JSON具有自我描述性,很容易理解. 数据格式: { "name":& ...

  6. 精尽MyBatis源码分析 - MyBatis-Spring 源码分析

    该系列文档是本人在学习 Mybatis 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释(Mybatis源码分析 GitHub 地址.Mybatis-Spring 源码分析 GitHub ...

  7. 训练yolo之前,anchor聚类问题

    前期做数据可视化,发现标签数据存在一些孤立点(噪声点),影响kmeans聚类. 处理方法如下: 使用kmeans迭代10次得到聚类中心 计算所有数据到其聚类中心的欧式距离均值和方差 通过拟合正态分布, ...

  8. Nginx配置https以及配置说明

    示例 worker_processes 1; events { worker_connections 1024; } http { #均衡负载 upstream demo{ server localh ...

  9. fist-第九天冲刺随笔

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzzcxy/2018SE1 这个作业要求在哪里 https://edu.cnblogs.com/campus/fz ...

  10. 老猿学5G扫盲贴:N6接口用户平面协议栈对应的网络分层模型

    在网络通信模型中,都对应有分层的网络结构,如开放式系统互联(OSI)的七层模型(物理层.数据链路层.网络层.传输层.会话层.表示层和应用层)以及TCP/IP四层(网络接口层.网络层.传输层和应用层)模 ...