微信小程序canvas图片及文本适配的方法
微信小程序canvas图片及文本适配的方法
这篇文章主要介绍了微信小程序canvas图片及文本适配的方法的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇微信小程序canvas图片及文本适配的方法文章都会有所收获，下面我们一起来看看吧。
场景需求
小程序目前不支持直接分享到朋友圈，所以对于有分享到朋友圈的需求，一般是生成一张图片，例如，生成一张带有小程序码的图片，用户可以将这张图片保存到手机本地，然后将这张图片分享到朋友圈。这张图片需要使用canvas画出来。
今天我们不讲怎么生成码，这个一般是后端封装一个API，前端通过调用API得到一个小程序码的url，通过image去画到canvas上，跟在canvas上画一个image是一样的逻辑。这篇文章主要是讲怎么在canvas上适配图片和文字，也就是怎么将图片和文本画到canvas上的正确的位置，能在不同的手机上都能正确的展示。
效果图展示（以下图片是在微信开发者工具中显示的）
这里演示的Demo是：
“选择图片”button选择一张图片，可以居中显示在以下图中的黄色区域，即canvas中，并在canvas的顶部居中展示文本“你若盛开，蝴蝶自来”。
代码说明
wxml
<buttonbindtap="chooseImg">选择图片</button><viewclass="canvas-box"><canvasclass="canvas"canvas-id="shareCanvas"bindlongtap="saveShareImage"></canvas></view>
$3. scss（wxss） 这里我用的是scss去写样式代码，在webStorm中可以通过配置，将scss解析成wxss，至于具体怎么配置，可以自行百度。 PS1：这里定义了一个scss rpx function，是因为在webStrom中格式化代码的时候会将数字和单位rpx中间添加一个空格，导致编译报错，所以用一个function去处理 PS2：样式说明（设计稿是基于iphone6视觉稿标准）： button宽高：700rpx * 92rpx (350px * 46px) 包裹canvas的容器的view（.canvas-box）position:fixed,占据除顶部button的高度之外，填满剩余全部空间，canvas居中显示，宽高：700rpx， 100%
@functionrpx($value){@return$value*1rpx;}page{background-color:#fff6f6;button{width:rpx(700);height:rpx(92);background-color:#ffddab!important;}.canvas-box{position:fixed;top:rpx(92);left:0;right:0;bottom:0;canvas{position:absolute;width:rpx(700);height:100%;top:50%;left:50%;transform:translate(-50%,-50%);}}}$4.js1、在data中定义三个变量
data:{windowWidth:0,//可使用窗口宽度windowHeight:0,//可使用窗口高度ratio:0//根据尺寸动态计算1px换算成多少rpx}
2、通过wx.getSystemInfo获得系统信息，并且计算ratio
onReady:function(e){//获取系统信息wx.getSystemInfo({success:res=>{console.log(res);this.setData({windowWidth:res.windowWidth,windowHeight:res.windowHeight,});this.setData({//屏幕宽度375px=750rpx，1px=2rpx//1px=（750/屏幕宽度）rpx；//1rpx=（屏幕宽度/750）px;ratio:750/this.data.windowWidth});}});},
3、button的触发事件chooseImg，通过wx.chooseImage选择图片，通过wx.getImageInfo获取选择的图片的大小
chooseImg:function(){wx.chooseImage({count:1,success:res=>{letimgUrl=res.tempFilePaths[0];//获取图片大小wx.getImageInfo({src:imgUrl,success:data=>{letimgWidth=data.width;letimgHeight=data.height;//创建canvas，根据选择的图片大小，在canvas上绘制图片和文字this.createCanvasShareImage(imgUrl,imgWidth,imgHeight);}});}});}
4、创建canvas并在canvas上添加图片和文本
createCanvasShareImage:function(imgUrl,imgW,imgH){//使用wx.createCanvasContext获取绘图上下文contextletcontext=wx.createCanvasContext('shareCanvas');console.log('context:',context);//获取canvas的宽度：//750的设计稿基于iphone6的尺寸（屏幕宽度：375px）在小程序中的比例是：1px=2rpx==>375px=750rpx==>屏幕宽度(px)=750rpx//所以1rpx=屏幕宽度/750//我们这里css中设置的canvas的width：700rpx,所以canvas的宽度计算是：[（屏幕宽度/750）*700]rpx，这样就可以做到在不同手机上都可以适配letcanvasWidthPx=700/this.data.ratio;//设置canvas的背景并填充canvascontext.fillStyle='#ffdc22';context.fillRect(0,0,canvasWidthPx,this.data.windowHeight);//绘制图片：图片居中显示在canvas中letimgX=(700-imgW)/2;letimgY=(this.data.windowHeight*this.data.ratio-46*this.data.ratio-imgH)/2;letclipWidth=imgW*this.data.ratio;letclipHeight=imgH*this.data.ratio;context.drawImage(imgUrl,-imgX,-imgY,clipWidth,clipHeight,0,0,imgW,imgH);//设置字体大小、文本颜色context.setFontSize(20);context.fillStyle="#000";//计算文本的宽度：measureText()取到文本的widthlettxtWidth=context.measureText('你若盛开，蝴蝶自来').width;//绘制居中文本：这个地方的(x,y)的坐标是在文本的左下角位置context.fillText("你若盛开，蝴蝶自来",(canvasWidthPx-txtWidth)/2,20*this.data.ratio);context.draw();}
5、长按bindlongtapcanva保存图片或者直接预览图片，先通过wx.canvasToTempFilePath将当前画布指定区域的内容导出生成指定大小的的图片，再通过wx.saveImageToPhotosAlbum将图片保存到本地，或者通过wx.previewImage直接预览图片。
saveShareImage(){wx.canvasToTempFilePath({canvasId:'shareCanvas',success:(res)=>{console.log('canvasToTempFilePath：',res);//将图片保存到相册wx.saveImageToPhotosAlbum({filePath:res.tempFilePath,success:(data)=>{console.log(data);}});//直接预览图片wx.previewImage({urls:[res.tempFilePath]})}})}
关于“微信小程序canvas图片及文本适配的方法”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“微信小程序canvas图片及文本适配的方法”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道。
