139-8950-0275

绍兴云远网络热线
首页 >> 小程序 >>小程序专业知识 >> 这些 Canvas 小技巧,保证你新年用得上-绍兴抖音短视频直播商城开发为你呈现
详细内容

这些 Canvas 小技巧,保证你新年用得上-绍兴抖音短视频直播商城开发为你呈现

时间:2022-05-17     作者:绍兴抖音短视频直播商城开发【转载】   来自:微信派

小程序技术研发工程师 binnie 原创




一键加滤镜

快速合成音视频

轻松挑选视频封面

……


Canvas 能够做这些?


作为资深的开发者,相信大家对 Canvas 都不陌生。这项能力在绘制图形方面发挥着极大的作用,高效支持图片编辑、数据可视化等应用场景。但是只局限于一般能力应用,那格局就小了


Canvas 的应用场景非常丰富!赶紧往下看看这些隐藏的 Canvas 小技巧,保证你新年用得上!还有手把手教程以及文末彩蛋哟。

image.png


示例:新年模板长按保存祝福



适用场景:图片分享海报

相关 API:RenderingContextCanvaswx.canvasToTempFilePath


Step 1: 创建实例获取对象

创建 Canvas 实例,获取 CanvasRenderingContext2D 对象(Canvas 绘图上下文)来绘制形状、文本、图像等


Step 2: 设置宽高调整图片

获取 Canvas 绘图上下文后,将 Canvas 的宽高设置为节点宽高 * 设备像素比,绘制出来的图片更清晰


Step 3: 绘制内容

使用 CanvasRenderingContext2D 绘制,根据业务需要在画布中绘制头像、文字、背景等


Step 4: 生成并保存本地

使用 wx.canvasToTempFilePath 将画布生成图片,wx.saveImageToPhotosAlbum 将图片保存到本地



-- • Video 绘制 Canvas / webgl • --



示例:视频文件绘制 Canvas




适用场景:制作 Video 滤镜、挑选 Video 封面等
相关 API:RenderingContextCanvas

Step 1: 获取实例
通过 wx.createSelectorQuery 获取 VideoContext 实例
Step 2: 绘制内容
获取 VideoContext 实例后,将 VideoContext 传递给 Canvas 进行绘制。开发者根据业务需求选择绘制类型:



  • Canvas 2d 写法:canvas.drawImage(video, ...)
  • webgl 写法:gl.texImage2D(..., video)


-- • 视频解码并绘制到 webgl • --


示例:视频一键解码并绘制到 webgl



适用场景:添加特效、贴图等视频编辑场景



相关 API:wx.createVideoDecoderVideoDecoderRenderingContextCanvas.requestAnimationFramewx.createMediaAudioPlayerMediaAudioPlayer



Step 1: 创建视频解码器进行解码



1. 调用 createVideoDecoder 对视频进行解码
2. 使用 videodecoder.start 启动解码,视频源文件不限制本地或远程路径
3. 通过 videodecoder.on('start', res => {}) 监听解码,通过 videodecoder.getFrameData() 获取到解码数据
Step 2: 解码数据绘制到 webgl



1. 通过 gl.texImage2D(..., image) 将解码数据绘制到 webgl

2. 使用 webgl.requestAnimationFrame 继续绘制,效果更加流畅


Step 3: 添加音频播放器同步播放音频



完成 Step2 后,webgl 只有视频播放,缺少音频。因此使用 wx.createMediaAudioPlayer(),支持 addAudioSource 传入 videodecoder,保证视频帧渲染音画同步




-- • 录制并导出 webgl 视频 • --




示例:录制并一键导出 webgl 视频



适用场景:将动画、编辑过的视频导出视频文件保存



相关 API:wx.createMediaRecorderMediaRecorderwx.createMediaContainerMediaContainerMediaTrack

Step 1: 创建 webgl 画面录制器进行录制
通过 createMediaRecorder 创建页面录制器,并且绑定 webgl(建议离屏状态,效果更好)进行录制
Step 2: 添加音频合成音视频
1. 通过 createMediaContainer 创建音视频处理容器来合成音视频
2. 通过 MediaContainer.extractDataSource 将视频源分离出视频轨道和音频轨道,将需要的轨道通过 MediaContainer.addTrack 添加到容器中
3. 通过 MediaContainer.export 导出即可获得合成后的视频文件


-- •高效图像处理彩蛋 • --

学会以上这些 Canvas 小技巧,还担心新年的美图美照美视频处理不过来?赶紧码下这个 Canvas 代码包,保证你就是家里最闪耀的靓女靓仔 


预祝大家新的一年 Canvas 在手,红包一直有!

技术支持: 杭州云远科技有限公司 | 管理登录
seo seo