制作加载从模糊到清晰的图片

通常在网页中看到的图片有两种加载方式,一种从模糊然后逐渐清晰,另一种逐行加载显示清晰的图片.造成这种方式的原因是图片的压缩算法不同,第一种是小波算法,第二种是离散余弦变化.

从用户体验上来讲第一种加载方式无疑更加友好,那么怎么制作这样的图片呢,很简单,使用PS导出即可

PNG图片使用PS导出时,勾选交错,jpg导出时,勾选连续.导出的图片就是从模糊到清晰的效果了,通常称为交错式PNG和渐进式JPG

彻底清除微信缓存方法

在做南航母亲节活动的时候在微信ios客户端遇到一个比较顽固的js文件缓存,用之前的方法无法清除缓存

平常所用清除微信浏览器缓存的方法:

  • 加版本号
  • 彻底关闭微信重新进入,
  • 退出重登

在以前的工作中上面三步基本都能达到清除效果

如果在微信安卓端,可以使用debugx5.qq.com来清除文件缓存,但是ios使用的是苹果系统浏览器内核,无法解决

最后使用了一种方法:
删除服务器端文件>微信访问服务器端删除的文件>将删除的文件重新放回服务器>缓存清除

麻烦是麻烦,但是总算是清掉了缓存……

canvas合成图片的各种坑

做南航三八妇女节推广活动时,用到了canvas合成图片和文字:


图中墨菲为微信授权登录获取的用户昵称

坑1:

页面中使用了网络字体,canvas中所引用的字体必须在文档流中有其他标签(span,p等)引用该字体!!!否则无法使用…

坑2:

必须再等到字体下载完成之后再去渲染canvas,字体才能有作用(这个是废话,不过一般中文字体包都比较大,如果不注意可能执行js代码的时候字体文件还没有下载完成)

坑3:

canvas连续draw图片的时候,需要一定间隔,这个问题是在IOS发现的,使用Android没有问题,IOS有时会出现之后draw没有绘制成功的问题,加间隔后解决

坑4:

canvas绘制图片进行拉伸等操作会造成图片失真,不改变图片默认大小绘制不失真

微信中如何长按图片保存的是另一张图片

把想要用户保存的图片,置顶,透明度为0就可以了(可以设置为0.01,设置为0时在有些机器下有bug)

在向canvas上下文绘制图片时,可以直接使用new Image(),不一定要使用实体img标签

将Data URL(base64)放入img的src时候,如果img样式设置宽高,不会影响图片质量,下载下来的图片仍然是原图大小