uni-app开发之微信小程序合成自定义分享图并保存

遇到的难点对于canvas来说,所有的布局都需要精准的定位后再绘制出来,所以就要精确定位,还好公司的设计图标注很详细。自定义图片中包括文字、二维码及网络图片。文字和二维码都可以解决,但是想显示网络图片必须先获取图片信息或将图片下载后才能直接使用ctx.drawImage绘制图片。一步步试探首先生成二维码,生成后进行回调生成图片因为有网络图片,所有要用到方法: uni.getImageInfo(OBJECT)uni.getImageInfo({ src: 'https://qiniu...
摘要由CSDN通过智能技术生成

遇到的难点
对于canvas来说,所有的布局都需要精准的定位后再绘制出来,所以就要精确定位,还好公司的设计图标注很详细。
自定义图片中包括文字、二维码及网络图片。文字和二维码都可以解决,但是想显示网络图片必须先获取图片信息或将图片下载后才能直接使用ctx.drawImage绘制图片。
一步步试探
首先生成二维码,生成后进行回调生成图片
因为有网络图片,所有要用到方法: uni.getImageInfo(OBJECT)

uni.getImageInfo({
    src: 'https://qiniu.....com/......png',
    success: function (res) {
        console.log(res)
    }
})

然后在控制台看到:

但是出现报错.png

根据文档,在小程序后台-设置-开发设置-服务器域名来进行操作(操作完成后,要等一会再试就生效了):

把图片的域名加到downloadFile合法域名中.png
在uni.getImageInfo的成功回调后, 在Canvas上画图,在这里附上绘制页面上居中文字及圆形头像的方法

//绘制背景图
ctx.drawImage(res.path,0,0,540,200)
                        
//绘制文本信息
ctx.setFontSize(20);
ctx.setTextAlign('center');
ctx.fillText('活动时间', 270, 540)//270就是x坐标的中心点位置

//头像,原图100*100的尺寸,居中显示直径为100的圆形头像
ctx.save();
ctx.begi
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值