小程序canvas 居中_微信小程序内玩转GIF-CSDN博客

本文链接：https://blog.csdn.net/weixin_35422230/article/details/112783715

本文详细介绍了在微信小程序中实现GIF在canvas上绘制的原理和方法，包括利用libgif.js解码GIF，修改源码以避免DOM操作，以及在小程序中使用worker进行编码。通过小程序的canvas API，实现了GIF帧的绘制，并讨论了性能优化和H5与小程序的差异。最后，建议将复杂的GIF处理放在服务端以提高效率。

摘要由CSDN通过智能技术生成

纯技术贴：

要在H5或者小程序内实现图片的制作比如：编辑，合成，滤镜等功能，不是什么难事。现有的API在你对图片格式以及区别不慎了解的情况下就可以轻松完成。

例如我想在图片上添加一个水印，是一个非常简单的操作。

let ctx = canvasElelement.getContext('2d');ctx.drawImage(img,0,0,width,width)ctx.drawText("我是水印",100,100)let data = canvasElelement.toDataUrl();

基本上通过以上的方式就可以实现一个图片添加文字并导出为base64的操作。通过最新的Blob相关的api，可以方便的对得到的图片进行本地化的操作：比如保存在本地，上传file 文件至服务器，这些操作小微信小程序以及H5端都可适用，区别在于小程序没有Blob api，但可以通过小程序的

wx.getFileSystemManager()

相关的API 实现字节流本地化的一些操作。

随着人们精神需求的不断提高，GIF 的日常操作也出现在了产品的需求日志中。

GIF 和其他图片的格式一样，都可以在img 标签内得到访问，但区别于其他图片资源的绘制，H5 和小程序没有直接通过canvas 的方式去绘制GIF 的方式。

大家可以简单的把GIF 当作是由若干张图片构成的图片序列帧格式，需要在canvas 上绘制gif，只需要得到这张gif 每一张的帧信息即可。canvas 除了提供比较可视化的绘制方式：drawImage 以外，还提供了 putImageData这个api。

putImageData 需要提供的canvas 的内容是一个Uint8Array：一个由8比特位组成的数组。例如：

[71, 73, 70, 56, 57, 97, 44, 1, 44, 1, 247, 0, 0, 1, 10, 14, 1, 10, 14,  1,