小程序canvas输出gif格式的图片作为表情

canvas的基础直接略过，可以自己去学习,我们主要看小程序输出gif格式的方式

1.可以使用前端传参的方式，通过后端去处理图片完成(此处不讲解)

2.使用微信的FileSystemManager输出gif格式图片

在看微信小程序的官方文档当中我们可以知道canvas使用wx.canvasToTempFilePath的API输出两种图片的格式是png和jpg，那么我们需要如何实现gif格式的输出

我们需要使用gif.js;官网地址：gif.js，因为小程序不直接操作DOM的属性和只能有一个worker的方式，我们需要改写gif.js的文件

GIF.prototype.finishRendering = function() {var data, frame, i, image, j, k, l, len, len1, len2, len3, offset, page, ref, ref1, ref2;len = 0;ref = this.imageParts;for (j = 0,len1 = ref.length; j < len1; j++) {frame = ref[j];len += (frame.data.length - 1) * frame.pageSize + frame.cursor}len += frame.pageSize - frame.cursor;this.log("rendering finished - filesize " + Math.round(len / 1e3) + "kb");data = new Uint8Array(len);offset = 0;ref1 = this.imageParts;for (k = 0,len2 = ref1.length; k < len2; k++) {frame = ref1[k];ref2 = frame.data;for (i = l = 0,len3 = ref2.length; l < len3; i = ++l) {page = ref2[i];// data.set(page, offset);for (var _i = 0; _i < frame.pageSize; _i++) {data[offset + _i] = page[_i]}if (i === frame.data.length - 1) {offset += frame.cursor} else {offset += frame.pageSize}}}let worker = this.freeWorkers.shift();// console.log('worker', worker)worker.terminate(); // 销毁多线程// image = new Blob([data],{//     type: "image/gif"// });return this.emit("finished", data)// return this.emit("finished", image, data)}

GIF.prototype.addFrame = function(image, options) {var frame = {}, key;if (options == null) {options = {}}frame.index = options.index || 0;frame.transparent = this.options.transparent;for (key in frameDefaults) {frame[key] = options[key] || frameDefaults[key]}if (this.options.width == null) {this.setOption("width", image.width)}if (this.options.height == null) {this.setOption("height", image.height)}if (image && image.width && image.height && image.data) {frame.data = image.data// } else if (typeof ImageData !== "undefined" && ImageData !== null && image instanceof ImageData) {//     frame.data = image.data// } else if (typeof CanvasRenderingContext2D !== "undefined" && CanvasRenderingContext2D !== null && image instanceof CanvasRenderingContext2D || typeof WebGLRenderingContext !== "undefined" && WebGLRenderingContext !== null && image instanceof WebGLRenderingContext) {//     if (options.copy) {//         frame.data = this.getContextData(image)//     } else {//         frame.context = image//     }// } else if (image.childNodes != null) {//     if (options.copy) {//         frame.data = this.getImageData(image)//     } else {//         frame.image = image//     }} else {throw new Error("Invalid image")}return this.frames.push(frame)}

第二步：

    async createGif()  const self = thisif (this.isShown) {return} this.isShown = truelet systemObj = wx.getSystemInfoSync()let pixelRatio = systemObj.pixelRatiothis.setData({pixelRatio: pixelRatio})let windowWidth = systemObj.windowWidth // 总的px宽度let _1rpx = windowWidth / 750.0let width = this.data.imgW, height = this.data.imgHlet ctx = wx.createCanvasContext('ca')let gif = new GIF({workers: 1,width: width/pixelRatio, // 输出图片的宽高height: height/pixelRatio,debug: true})let startTimegif.on('start', function() {startTime = Date.now()return true});gif.on('progress', function(p) {self.setData({progress: p * 100})return true});gif.on('finished', function(data) {const fm = wx.getFileSystemManager()let ab = new ArrayBuffer(data.length) // js方法let dv = new DataView(ab) // js方法for (var i = 0; i < data.length; i++) {dv.setInt8(i, data[i])}fm.writeFile({filePath: `${wx.env.USER_DATA_PATH}/test.gif`,encoding: 'binary',data: ab,success (r) {console.log('保存图片', `${wx.env.USER_DATA_PATH}/test.gif`)self.setData({gifFile: `${wx.env.USER_DATA_PATH}/test.gif`})},fail (r) {console.log(r)}})return true});ctx.clearRect(0, 0, width/pixelRatio, height/pixelRatio)ctx.setFillStyle('#f00');ctx.fillRect(0, 0, width/pixelRatio, height/pixelRatio)ctx.save()ctx.drawImage(this.data.diyFile,0,0, width/pixelRatio, height/pixelRatio)let drawRes = await new Promise(r => ctx.draw(true, r))try {let imgdata = await new Promise((resolve, reject) => wx.canvasGetImageData({canvasId: 'ca',height: height/pixelRatio,width: width/pixelRatio,x: 0,y: 0,success (r) {resolve(r)},fail (e) {reject(e)}}))console.log(imgdata)setTimeout(()=>{gif.addFrame(imgdata, {delay: 2000})console.log(gif.render())}, 2000)} catch(e) {}
}

这样我们就改写好了适合小程序的gif图，后面根据gif的官方文档API添加图片即可，实际上我们只需要了解小程序跟PC端的DOM操作的区别然后对应修改gif.js的文件即可，有时间的可以扩展在小程序当中生成gif动画功能

小程序canvas输出gif格式的图片作为表情相关推荐

小程序canvas 2d 绘图无法drawImage图片？
小程序canvas 2d 绘图无法drawImage图片? 微信iOS 7.0.20 版本使用canvas 2d 绘制drawImage时无法成功绘制,图片不显示,img1.onload不执行,执行 ...
小程序---canvas画图，生成分享图片，画图文字换行
小程序目前只支持转发,不支持分享朋友圈,为了能实现分享,很多线上小程序通过生成分享图片,保存到相册来给用户增加分享的可能. 具体思路及简要代码如下: 一:canvas画图drawCanvas:func ...
微信小程序 canvas描绘文字图片生成图片并保存到本地
在实现这个功能时,遇到以下的问题: 1. canvas绘制文字的换行问题: 如果文字的长度大于你所定的宽度的话,文字会超出你所定宽度: 小程序的CanvasContext.fillText有一个max ...
uni保存canvas图片_小程序canvas【开箱即用】
前言小程序canvas有多坑,相信开发过的同学们都深有体会每一次写使用canvas都忍不住骂两句鉴于此,小弟就从0开始,一步一步实现画图功能,并且列明所有我遇到的坑注意:本文都是基于uni开发 ...
小程序Canvas绘制图片太大，自动闪退，安卓会有crash问题
2019独角兽企业重金招聘Python工程师标准>>> 问题说明: 目前小程序Canvas版本还有不少bug,性能较低. 对于图片太大使用ctx.drawImage(imgpath, ...
微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
微信小程序Canvas绘图API
微信小程序Canvas绘图API 前言使用姿势常用API(以下API都是通过CanvasContext对象进行调用) 颜色.样式 setFillStyle(string|CanvasGradien ...
小程序canvas绘制商品海报实现分享朋友圈
小程序canvas绘制商品海报实现分享朋友圈效果图: 实现步骤就是点击生成图片在canvas画布中画出一张海报然后保存在本地在imags标签中展示,此处尽可能的把canvas组件隐藏但是不能 ...
小程序 canvas画图片
小程序 canvas 新版(2.9.0之后)和旧版画图步骤这边记录一下希望大家少踩坑旧版需要canvas-id <canvas :style="`width: ${cWidth} ...
微信小程序canvas画布新接口type为2D时drawImage方法的使用以及注意事项
微信小程序canvas画布自2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),但文档不全,从原canvas的api转变到新的api时遇到不少问题,现将新版与旧版的画布载入图 ...

小程序canvas输出gif格式的图片作为表情

小程序canvas输出gif格式的图片作为表情相关推荐

最新文章

热门文章