标签：canvas base64 ctx H5 width uni 分享

由于微信的直接分享限制较多，改为利用canvas来做分享

花了一天多完成，几个知识点（坑）的记录

1，绘制二维码本来采用功能更丰富的weappQRcode.js，但h5端难以调通，

所以用的是wxqrcode.js，返回的是一个base64，7是url的规范等级

this.qr = wxqrcode.createQrCodeImg(7, window.location.href)

直接用绘图方法就能根据base64画出来

ctx.drawImage(this.qr, x,y,widt, height)

画出来后的分享功能，若是其他平台可以用uni.saveImageToPhotosAlbum直接转为图片

但H5端不可以，所以用uni.canvasToTempFilePath转为base64后，再写入img的src

                        uni.canvasToTempFilePath({
                            x: 0,
                            y: 0,
                            width: canvasInfo.width,
                            height: finalHeight,
                            destWidth: canvasInfo.width,
                            destHeight: finalHeight,
                            canvasId: 'shareCanvas',
                            success: function(res) {
                                that.canvasImg = res.tempFilePath
                            },

                        })

文字换行，采用的是ctx.measureText拿到一个字的宽度，然后不断遍历计算，有点麻烦但基本解决需求

const oneTextWidth = ctx.measureText(‘一段文字’).width 

还需要学习和优化的地方，canvas尺寸与屏幕尺寸之间的关系

标签：canvas,base64,ctx,H5,width,uni,分享
来源： https://www.cnblogs.com/truegrit/p/15823965.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。