test.wxml
<canvas style="width:{{imageWidth}}px;height:{{imageHeight}}px;" canvas-id="myCanvas" class=‘canvas‘ hidden=‘{{hideme}}‘></canvas> <image wx:if="{{tempPath!=‘‘}}" class="viewimg" src="{{tempPath}}" mode="widthFix"></image> <view class="operbtns"> <button class="button" type="primary" bindtap="savePic">保存图片</button> </view>
test.js
Page({ data: { title: ‘测试‘,tempPath: ‘‘,hideme: false },onLoad: function (options) { var that = this; var imageSize = that.image(); that.setData({ imageWidth: imageSize.imageWidth,imageHeight: imageSize.imageHeight,windowscale: imageSize.windowscale,}); //获取背景图片 that.getBackground(); //获取头像 //that.getAvatar(); wx.showToast({ title: ‘正在生成图片‘,icon: ‘loading‘,duration: 10000,}); },image: function() { var imageSize = {}; var originalScale = 1;//图片高宽比 //获取屏幕宽高 wx.getSystemInfo({ success: function (res) { var windowWidth = res.windowWidth; var windowHeight = res.windowHeight; var windowscale = windowHeight / windowWidth;//屏幕高宽比 imageSize.windowscale = windowscale; if (originalScale < windowscale) {//图片高宽比小于屏幕高宽比 //图片缩放后的宽为屏幕宽 imageSize.imageWidth = windowWidth; imageSize.imageHeight = Math.floor(windowWidth * 1.779); } else {//图片高宽比大于屏幕高宽比 //图片缩放后的高为屏幕高 imageSize.imageHeight = windowHeight; imageSize.imageWidth = Math.floor(windowHeight / 1.779); } } }) return imageSize; },getBackground: function () { var that = this; wx.downloadFile({ url: ‘https://a.b.c/public/images/bg.png‘,success: function (res) { that.setData({ tempPath: res.tempFilePath,share: res.tempFilePath,}) //把背景画到画布上 that.createImg(); },fail: function () { console.log(‘fail‘) } }) },createImg: function () { var that = this; var ctx = wx.createCanvasContext(‘myCanvas‘); ctx.setFillStyle(‘White‘); ctx.fillRect(0,0,that.data.imageWidth,that.data.imageHeight); ctx.drawImage(that.data.share,0,that.data.imageHeight); ctx.save(); //ctx.beginPath(); //ctx.arc(that.data.imageWidth / 2,that.data.imageHeight * 0.63,65,2 * Math.PI); //ctx.clip(); //ctx.drawImage(that.data.avatar,that.data.imageWidth / 2 - 60,that.data.imageHeight * 0.55,120,120); //ctx.restore(); ctx.setTextAlign(‘center‘); ctx.setFillStyle(‘#ffffff‘); ctx.setFontSize(22); ctx.fillText(that.data.title,that.data.imageWidth / 2,that.data.imageHeight * 0.41); ctx.draw(); //显示新画的图片 that.viewPic(); },viewPic: function(){ var that = this; wx.canvasToTempFilePath({ width: that.data.imageWidth,height: that.data.imageHeight,canvasId: ‘myCanvas‘,hideme: true }); } }); wx.hidetoast(); },savePic: function () { var that = this; wx.showToast({ title: ‘正在保存图片‘,}); util.savePicToAlbum(that.data.tempPath); },onReady: function () { },onShow: function () { },onHide: function () { },onUnload: function () { },onShareAppMessage: function () { },onPullDownRefresh: function () { wx.stopPullDownRefresh(); } })
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。