小程序生成海报并下载到本地图库

需求

小程序在海报页点需生成海报，并下载图片到本机，同时，下载的图片上有名片信息，和一个小程序太阳码图片。

思想

使用 canvas 来画出图片，名片文本，和小程序的太阳码

操作

在小程序的 wxml 中添加 canvas 标签

<view>.................<canvas canvas-id="canvas" type="2d" id="canvas" class="canvas"></canvas>
</view>

设置canvas 的

.canvas{width:750rpx;   //可以试一下不要宽高， 我没有试过height:1442rpx;margin:0 auto;position:absolute;     //因为有宽高，但页面中又不想让它显示， 所以这样做了csstop:-9999rpx;left:-9999rpx;
}

简易的代码，其中可以使用 promise 来等待图片画完

checkauth(){  //检测用户是否有  写入图片到相册的权限， 如果没有， 就向用户请求这一权限wx.getSetting({withSubscriptions: true,success (res) {console.log(res.authSetting)if(res.authSetting["scope.writePhotosAlbum"] && res.authSetting["scope.writePhotosAlbum"] === true){ }else{wx.authorize({scope: 'scope.writePhotosAlbum',success () {}})}}});},//生成海报makehaibao(){this.checkauth();console.log(123123123);let that = this;const query = wx.createSelectorQuery();console.log(123);query.select("#canvas").fields({node:true,size:true}).exec(res=>{console.log(res);const canvas = res[0].node;canvas.width=375;   canvas.height=721;               //自定义一下画布的大小const ctx = canvas.getContext("2d");ctx.fillStyle = "#fff";ctx.fillRect(0,0,375,721);     //设置一下背景的填冲const bg = canvas.createImage();bg.src=this.data.detail.imagesrc;    //this.data.detail.imagesrc 这是一个网络图片的地址bg.onload = ()=>{console.log(bg);console.log(bg.width);console.log(bg.height);//这里把图片等比缩小const height = bg.height * 375 / bg.width;   //按比例把 网络图片画到 宽度为 375 的canvas上， 同时计算出 要画图片的高度ctx.drawImage(bg, 0, 0, 375, height)       //画图片const qrcode = canvas.createImage();qrcode.src = "../../images/kh.jpg"      //画本地的 小程序太阳码qrcode.onload = ()=>{ctx.drawImage(qrcode, 280, height+10, 90, 90)}//绘制文字let firstline = this.data.userinfo.username+"|"+this.data.userinfo.job;   //第一行的文字信息let secondline = this.data.userinfo.company;   //第二行的文字let thirdline = this.data.userinfo.mobile;       //第三行的文字ctx.fillStyle = '#000';      ctx.font = "16px Arial";ctx.fillText(firstline,20,height+30);       ctx.fillText(secondline,20,height+55);ctx.fillText(thirdline,20,height+80);ctx.fill();setTimeout(()=>{wx.canvasToTempFilePath({  //小程序的把canvas 转图片的方法canvasId: "canvas",canvas:canvas,x:0,y:0,success(res){wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(res1){wx.showModal({title: '提示',content: '海报已下载至相册,您可以转发朋友圈使用',success (res) {if (res.confirm) {console.log('用户点击确定')} else if (res.cancel) {console.log('用户点击取消')}}})}})}}, that)},1000)}})},

小程序生成海报并下载到本地图库相关推荐

小程序生成海报并下载
参考文章demo:https://developers.weixin.qq.com/s/J38pKsmK7Qw5 可视化编辑代码工具:https://lingxiaoyi.github.io/pain ...
微信小程序生成海报并保存在本地（组件开发）
1.将商品图片和二维码生成海报在屏幕中间子组件代码 <template><view><div class="poster"><div c ...
微信小程序生成海报可保存海报和分享海报
最近因为小程序生成海报分享的问题头疼了很久,所以自己总结了一下供大家参考,可以放置用户头像姓名以及商品名称价格和二维码太阳码等,实测可用! 下载链接https://download.csdn.net/ ...
微信小程序生成海报 poster
原生小程序 canvas 小程序-canvas绘图并保存到系统相册小程序导出朋友圈海报详细记录逻辑清晰的说明了,原生小程序 canvas 绘制的步骤: 获取 Canvas.context 绘制背景 ...
微信小程序把图片下载到本地相册（附源码）
微信小程序保存网络图片到本地实现流程: 1.把图片下载到本地相册 2.检查用户的授权状态(三种状态:未授权,已授权,未同意授权),判断是否授权保存图片的能力,如果是用户点击了不同意授权给小程序保存图片 ...
微信小程序生成海报下载到本地手机本地
里面有注释,这个就不详细说了,把对应的的图片路径换掉,就可以完成运行了 index.js 在这里有一个问题,所以在ctx.draw里面设置了一个定时器,因为官方文档说在ctx.draw回调中会绘制完成 ...
小程序生成海报，easy-canvas, painting参数使用demo
微信小程序不支持直接分享到朋友圈简直是一个大坑,最开始自己写了一个原始版本的canvas海报生成方式,结果发现生成的海报不是变形就是不适配所有屏幕,着实头疼了不少时间,前端实在太菜,偶然下载了一个电商 ...
微信小程序生成海报带二维码功能
wxml文件 <view><text class='shareText'>生成海报分享至</text><view class='imgBox'>< ...
小程序生成海报详解
效果图: <view class='poste_box' id='canvas-container' style='opacity:{{opacity}}'><canvas canv ...

小程序生成海报并下载到本地图库

需求

思想

操作

小程序生成海报并下载到本地图库相关推荐

最新文章

热门文章