小程序canvas生成海报

小程序canvas生成海报，画布转图片后可直接保存图片到系统相册；
海报素材使用图片宽750px；
注：
画布转图片时参数destWidth 值须 * dpr 否则IOS测试生成的图片是模糊的；

.wxml
注：
canvas CSS样式不可设置display:none; 开发者工具调试没有问题；IOS调试时是有问题的；
canvas CSS样式宽高（canvasW/canvasH）须与海报图片宽高一致否则IOS测试生成的图片是模糊的；

<canvas wx:if="{{!posterUrl}}" type="2d" id="myCanvas" style="width: {{canvasW}}rpx;height: {{canvasH}}rpx;"></canvas>
<image wx:if="{{posterUrl}}" data-url="{{posterUrl}}" catchtap="saveImg" class="invite_friends_posters_img" src="{{posterUrl}}" mode="aspectFit"></image>

.js

// 获取二维码图片后的操作
wx.showLoading({title: '生成中...',mask: true
})
//设置海报
this.setHb();

//设置海报
setHb() {// console.log(this.data.qrcodeurl);// 下载图片（url须在合法域名中）wx.downloadFile({url: this.data.qrcodeurl, //携带当前用户信息的二维码图片success: (qrcodeTempFileRes) => {console.log('二维码本地临时路径', qrcodeTempFileRes.tempFilePath);const query = wx.createSelectorQuery();query.select('#myCanvas').fields({node: true,size: true}).exec((res) => {// console.log(res);const canvas = res[0].node;// console.log('canvas初始宽高', canvas.width, canvas.height);const ctx = canvas.getContext('2d');const dpr = wx.getSystemInfoSync().pixelRatio;// console.log(dpr);// canvas.width = res[0].width * dpr;// canvas.height = res[0].height * dpr;// console.log(canvas.width , canvas.height)// ctx.scale(dpr, dpr);// 写入海报背景图片const posterBgImg = canvas.createImage();posterBgImg.src = '../../../images/posters.png';posterBgImg.onload = () => {// console.log('背景图实际宽高', posterBgImg.width, posterBgImg.height);canvas.width = posterBgImg.width;canvas.height = posterBgImg.height;this.setData({canvasW: posterBgImg.width, // 须 与海报图片宽度(canvas.width)一致 否则IOS测试生成的图片是模糊的canvasH: posterBgImg.height, // 须 与海报图片宽度(canvas.width)一致 否则IOS测试生成的图片是模糊的})// console.log('canvas宽高设置与背景图一致', canvas.width, canvas.height);ctx.drawImage(posterBgImg, 0, 0, posterBgImg.width, posterBgImg.height);// 写入二维码图片const qrcodeImg = canvas.createImage();qrcodeImg.src = qrcodeTempFileRes.tempFilePath;qrcodeImg.onload = () => {ctx.drawImage(qrcodeImg, 506, 1054, 160, 160);// 把当前画布指定区域的内容导出生成指定大小的图片，可直接保存图片到系统相册wx.canvasToTempFilePath({// x: 100,// y: 200,// width: 50,// height: 50,destWidth: canvas.width * dpr, // 须 * dpr 否则IOS测试生成的图片是模糊的destHeight: canvas.height * dpr, // 须 * dpr 否则IOS测试生成的图片是模糊的fileType: 'jpg',canvas: canvas,success: (posterImgTempFilePathRes) => {console.log('海报临时路径', posterImgTempFilePathRes.tempFilePath);this.setData({posterUrl: posterImgTempFilePathRes.tempFilePath,})wx.hideLoading();},fail(failres) {console.log(failres);wx.hideLoading();}})}}})},fail(res) {console.log(res)}})
},//保存海报图片
saveImg(e) {if (!this.data.ifSetting) {wx.getSetting({success: (res) => {console.log(res.authSetting);if (typeof(res.authSetting['scope.writePhotosAlbum']) != 'undefined') {if (!res.authSetting['scope.writePhotosAlbum']) {wx.openSetting({success(res) {console.log(res.authSetting);}})} else {this.setData({ifSetting: true});}}}})}// wx.downloadFile({//     url: e.currentTarget.dataset.url,//     success: (res) => {wx.showLoading({title: '下载中',})wx.saveImageToPhotosAlbum({// filePath: res.tempFilePath,filePath: e.currentTarget.dataset.url,success: (res) => {this.setData({ifSetting: true});wx.showToast({title: '保存海报成功',icon: 'success',duration: 2000})},fail() {wx.hideLoading();}})//    }// })
},

小程序canvas生成海报相关推荐

小程序canvas生成海报字体在背景图下方
小程序canvas生成海报字体在背景图下方图片是异步加载可以放在回调里设置字体也可以延迟放置如果还有更好的方法可以留言
mpvue 微信小程序canvas生成海报
mpvue 微信小程序canvas生成海报效果贴代码 html <template><view class="poster ...
小程序canvas生成海报保存至手机相册
小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2 ...
微信小程序 —— canvas生成海报图与分享
整体思路获取手机屏幕大小去依据设计尺寸比例调整 -wx.getSystemInfo 网络图片.base64图片保存到到本地临时文件路径 canvas绘制图片 - wx.createCanvasCon ...
小程序canvas生成海报图片压缩和失真问题解决
微信小程序实现canvas按照原图等比例不失真绘制海报图,防止模糊我这里的场景是收款二维码+收款背景图. 绘制二维码我这里绘制二维码使用的 wxapp-qrcode ,也可以使用weapp-qrc ...
微信小程序合成海报_微信小程序 canvas生成海报图片模糊问题
一.制作正常显示海报,生成二倍海报隐藏代码如下 {{sendName}} 保存图片 /*css*/ .btn { width: 300rpx; height: 90rpx; line-height: ...
微信小程序分享生成海报
本文转自:微信小程序实现生成海报并且保存本地 - 张正-博客园 - 博客园 html: <view><image src="{{img}}" class='bgI ...
小程序canvas商品海报绘制
小程序canvas海报绘制 1.html 绘制图片的元素 <view class="canvas-box"><canvas style="width: ...
小程序php生成海报,小程序用canvas绘制海报的做法
2020年第一篇文章,年初忙着复习刷题一直没空去写东西,书看的越多感觉越技不如人,始终徘徊在小菜鸡的行列中,最近项目里正好有一个canvas的业务,突然又燃起了我一个UI前端的火种,记下了踩坑和思考. ...

小程序canvas生成海报

小程序canvas生成海报相关推荐

最新文章

热门文章