需求场景：我们知道，微信小程序可以分享给好友或者微信群，不能分享到朋友圈，那分享到朋友圈就需要特殊处理一下，这里我们把小程序和canvas结合起来使用，生成自定义图片并保存到本地。 canvas的drawImage方法只支持本地图片，不支持网络图片，所以头像和背景图我都用get…

场景： 获取到一个file类型的图片，如果直接在html中预览？这里就是利用html5的新特性，将图片转换为Base64的形式显示出来。有两种方法： 当选择图片后，生成的img src类似"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520…

需要实现的功能随机产生一张图片拿到微信用户的头像和称呢（自己调后端的接口获取）把用户头像和称呢和随机产生一张图片合成一张海报可能上一页用户还有填入的心愿文本也要填入图片中实现效果图记录下在实现功能过程

写了很多的javascript和css3的文章，是时候写一篇canvas的了。canvas是html5提供的一个新的功能！至于作用，就是一个画布。然后画笔就是javascript。canvas的用途非常的广，特别是html5游戏以及数据可视化这两个方面。现在canvas给我的感…

Canvas是一个可以使用脚本（通常为Javascript，其它比如 Java Applets or JavaFX/JavaFX Script）来绘制图形，默认大小为300像素×150像素的HTML元素。 经过了以上地狱般的学习，我相信同学们现在已精通canvas。 接下来，我…

前段时间遇到了一个移动端对图像进行裁剪、压缩、旋转的需求。 考虑到已有各轮子的契合度都不高，于是自己重新造了一个轮子。 在HTML5时代，canvas的功能已经非常强大了，可以进行像素级的操作。像图像裁剪、压缩就都是基于canvas来实现的。 关于其中原理，无非就是利用canv…

这个依赖主要是将当前 HTML 结构以及 css 样式转换为 canvas。比自己用 api 去画方便多了 这个依赖主要是将 canvas 转换为图片，实际上，Canvas2Image.js 也是基于 canvas.toDataURL 的封装，相比原生的 API 对于转为图片的…

注：[n]标识为遗留问题，在文章末尾遗留问题部分有详细解释说明。 之前做了一个在线给图片添加文本框的工具，大体思路是先把图片加载到一个 DOM 结构中，然后通过 html2canvas 导出到一个canvas，最后通过 canvas 自带的 toDataURL 方法导出成图片。…

给大家讲解下我前几天看到的一个有趣小demo：视频在线截图。以下是我修改和添加了新功能后的效果图： 是不是很酷，其实挺简单的，下面就给大家讲讲怎么弄哈。 js的URL对象有个createObjectURL方法，它可以获取一个文件（File对象）的url，然后插入到video元素…