微信小程序 canvas 分享图片生成图片

onShow() {var that =this//2. canvas绘制文字和图片const ctx = wx.createCanvasContext('myCanvas');var imgPath = '../../image/1.png'var bgImgPath = '../../image/zny.png';var userImgPath = '../../image/zny.png';ctx.drawImage(imgPath, 0, 0, 320, 500);ctx.setFillStyle('white')ctx.fillRect(0, 0, 0, 0);ctx.drawImage(bgImgPath,  35, 403, 60, 60);ctx.drawImage(userImgPath,  30, 35, 70, 70);ctx.drawImage(imgPath,    410, 610, 160, 160);ctx.setFontSize(14)ctx.setFillStyle('#000')ctx.fillText('妖妖灵', 100, 60)ctx.setFontSize(16)ctx.setFillStyle('#999999')ctx.fillText('已坚持 100 天', 110, 199)ctx.setFontSize(16)ctx.setFillStyle('#3366FF')ctx.fillText('100', 214, 258)ctx.fillText('第 10000 名', 174, 283)// ctx.setFontSize(24)// ctx.fillText('长按扫码查看详情', 30, 770)ctx.draw()},

上面处理图片向图片增加需求的数据文字以及图片等

下一步将canvas生成图片

wx.canvasToTempFilePath({ //将canvas生成图片canvasId: 'myCanvas',x: 0,y: 0,width: 320,height: 500,success: function (res) {let urls = res.tempFilePath //图片临时路径// let urls = '../../image/guide.jpg' //图片临时路径wx.showShareImageMenu({ //分享给朋友path: urls,success: (res) => {console.log("分享成功：", res);},fail: (err) => {console.log("分享失败：", err);wx.showToast({title: "分享失败",duration: 2000})},})}}, this)},

微信小程序 canvas 分享图片生成图片相关推荐

微信小程序截图分享图片不清晰
微信截图分享一般实现是通过微信小程序canvas来实现,布局就靠固定画布宽度来摆放元素,字体填充居中使用measureText,计算字体宽度, 有效调用时,需先初始化 onst ctx = wx. ...
终于搞定微信小程序canvas分享海报
canvas drawer 做微信小程序中最好用的 canvas 绘图组件之一. 当前环境下,大家都非常需要分享到朋友圈这个功能,但是实现起来各有心酸(坑比较多),所以才有了如下的 canvas 绘图 ...
小程序canvas分享图片模糊解决方案
看到网上有好多小程序分享图片显示及导出模糊问题,想了下解决方案备用: 1.原因: 因为 canvas 不是矢量图,而是像图片一样是位图模式的.高 dpi 显示设备意味着每平方英寸有更多的像素.比如说二 ...
微信小程序canvas合成图片（海报）,生成的图片展示不出来，或者空白。
背景: 1.用户点击分享朋友圈,将二维码与一张背景图合成一张图片,然后将其显示. 2.用户点击保存图片将图片保存到手机相册里面. 问题: 用户点击分享盆友圈合成后的图片显示空白.控制台可以打印出来链接 ...
微信小程序canvas绘制图片真机不显示问题
用canvas绘制图片的时候,模拟器上正常显示,真机上不显示 const ctx = wx.createCanvasContext('canvasImg'); var imgUrl = 'https: ...
微信小程序canvas绘制图片的注意事项---不能是网络图片
上周五做了个需求,用canvas画图并保存到本地,没在手机上测试,今天看的时候突然发现: drawImage(imageResource, dx, dy, dWidth, dHeight) 其中ima ...
微信小程序 Canvas导出图片模糊？（已解决）
首先确定 userInfo 的 avatar 不是 132,原图是 0: 其次确定你的 destWidth 和 destHeight 不是 width 和 height; width: 200,hei ...
微信小程序 canvas描绘文字图片生成图片并保存到本地
在实现这个功能时,遇到以下的问题: 1. canvas绘制文字的换行问题: 如果文字的长度大于你所定的宽度的话,文字会超出你所定宽度: 小程序的CanvasContext.fillText有一个max ...
微信小程序 Canvas drawImage()绘图头像二维码安卓用户显示半透明！
微信小程序 Canvas drawImage() 图片在安卓显示为半透明我遇到的是drawImage()方法绘制头像和二维码时开发工具测试没问题真机测试则出现以下样式具体问题不太清楚,有可能 ...

微信小程序 canvas 分享图片生成图片

微信小程序 canvas 分享图片生成图片相关推荐

最新文章

热门文章

微信小程序 canvas 分享图片 生成图片

微信小程序 canvas 分享图片 生成图片相关推荐

最新文章

热门文章

微信小程序 canvas 分享图片生成图片

微信小程序 canvas 分享图片生成图片相关推荐