微信小程序里在canvas里使用base64的图片
wxml 文件：
1 <!-- <view class="admin-qrcode"> 2 <image src="{{adminQrcode}}" /> 3 4 </view> 5 <view class="admin-info"> 6 <view class="admin-info-no"> 7 账号：10086 8 </view> 9 <view class="admin-info-pwd"> 10 密码：10086 11 </view> 12 </view> --> 13 <view wx:if="is_hide_canvas"> 14 <canvas style="width: 320px; height: 400px; left:{{(screenWidth-320)/2}}px;top:20px;" canvas-id="myCanvas"></canvas> 15 </view> 16 17 <!-- <button bindtap="survived">生成</button> --> 18 19 20 <view class="oper-btn"> 21 <view class="oper-save" bindtap="saveToLoacl"> 22 <view> 23 <text class="iconfont icon-download oper-icon-save"></text> 24 </view> 25 <view> 26 保存 27 </view> 28 </view> 29 <view class="oper-share" bindtap="toShare"> 30 <button open-type="share" class="share-btn"> 31 <view> 32 <text class="iconfont icon-weixin oper-icon-share"></text> 33 </view> 34 <view> 35 微信好友 36 </view> 37 </button> 38 </view> 39 </view> 40 41 <!-- <button bindtap="saveToLoacl">保存</button> -->
js 文件：
1 const app = getApp(); 2 const http = require('../../../utils/http.js'); 3 const api = require('../../../config.js'); 4 const utils = require('../../../utils/util.js'); 5 6 Page({ 7 8 /** 9 * 页面的初始数据 10 */ 11 data: { 12 adminQrcode: '', 13 codeImg: '../../../image/shang.png', 14 is_hide_canvas: false, 15 tempFilePath: '', 16 basepath: '', 17 screenWidth: app.globalData.screenWidth 18 19 }, 20 21 22 getAdminQrcode: function() { 23 let _this = this; 24 let postData = { 25 'scene': '10086', 26 'page': 'pages/index/index', 27 'is_hyaline': '0' 28 }; 29 30 wx.showLoading({ 31 title: '数据请求中...', 32 mask: true 33 }) 34 35 http.httpPost(api.CreateQrcode, postData, (res) => { 36 console.log(res); 37 wx.hideLoading(); 38 if (!res) { 39 return; 40 } 41 42 if (res.success) { 43 let _result = res.result; 44 if (_result.success) { 45 46 47 this.setData({ 48 adminQrcode: 'data:image/png;base64,' + _result.data 49 }); 50 this.survived(); 51 52 53 } else { 54 utils.showToastMessage(_result); 55 } 56 } else { 57 utils.showToastMessage(res); 58 } 59 60 }); 61 }, 62 63 /** 64 * 生命周期函数--监听页面加载 65 */ 66 onLoad: function(options) { 67 if (options.admin_no && options.admin_pwd) { 68 this.setData({ 69 admin_no: options.admin_no, 70 admin_pwd: options.admin_pwd 71 }); 72 this.getAdminQrcode(); 73 } else { 74 wx.showModal({ 75 title: '提示', 76 content: '参数异常', 77 showCancel: false, 78 success: res => { 79 wx.navigateBack({ 80 81 }) 82 } 83 }) 84 } 85 86 87 }, 88 89 /** 90 * 生命周期函数--监听页面初次渲染完成 91 */ 92 onReady: function() { 93 94 }, 95 96 97 /** 98 * 生命周期函数--监听页面显示 99 */ 100 onShow: function() { 101 102 }, 103 104 /** 105 * 生命周期函数--监听页面隐藏 106 */ 107 onHide: function() { 108 109 }, 110 111 /** 112 * 生命周期函数--监听页面卸载 113 */ 114 onUnload: function() { 115 116 }, 117 118 /** 119 * 页面相关事件处理函数--监听用户下拉动作 120 */ 121 onPullDownRefresh: function() { 122 123 }, 124 125 /** 126 * 页面上拉触底事件的处理函数 127 */ 128 onReachBottom: function() { 129 130 }, 131 132 saveToLoacl: function() { 133 let _this = this; 134 const fsm = wx.getFileSystemManager(); 135 wx.saveImageToPhotosAlbum({ 136 filePath: _this.data.tempFilePath, 137 success(res) { 138 fsm.readdir({ // 读取目录内文件列表 139 dirPath: _this.data.basepath, 140 success(res) { 141 res.files.forEach((val) => { // 遍历文件列表里的数据 142 console.log(val) 143 fsm.unlink({ // 清除writeFile保存的图片 144 filePath: _this.data.basepath + '/' + val 145 }); 146 }) 147 }, 148 fail(err) { 149 console.log(err) 150 wx.showModal({ 151 title: '异常', 152 content: JSON.stringify(err), 153 showCancel: false 154 }) 155 } 156 }) 157 // wx.getSavedFileList({ 158 // success: savedFileInfo => { 159 // let list = savedFileInfo.fileList 160 // console.log("list:", savedFileInfo.fileList) 161 // for (let i = 0; i < list.length; i++) { 162 // wx.removeSavedFile({ 163 // filePath: list[i].filePath, 164 // }) 165 // } 166 // } 167 // }) 168 wx.showModal({ 169 title: '提示', 170 content: '图片保存成功，可在相册中查看', 171 showCancel: false, 172 }) 173 }, 174 175 fail(res) { 176 wx.hideLoading() 177 wx.showModal({ 178 title: '提示', 179 content: '图片保存失败，请重试', 180 showCancel: false 181 }) 182 } 183 }) 184 }, 185 toShare: function() { 186 wx.showToast({ 187 title: '请点击右上角分享按钮', 188 icon: "none" 189 }) 190 191 }, 192 193 /** 194 * 用户点击右上角分享 195 */ 196 onShareAppMessage: function(e) { 197 console.log(e); 198 let _this = this; 199 let share_type = e.from; 200 return { 201 title: '账号：' + _this.data.admin_no + " 密码：" + _this.data.admin_pwd, 202 path: '/pages/Admin/BindAdmin/BindAdmin?admin_no=' + _this.data.admin_no + '&admin_pwd=' + _this.data.admin_pwd 203 }; 204 }, 205 survived: function() { 206 let vm = this 207 // 创建画布对象 208 const ctx = wx.createCanvasContext("myCanvas", vm) 209 // base64格式图片转本地文件 210 const fsm = wx.getFileSystemManager(); 211 const timestamp = Date.parse(new Date()); // 先创建时间戳用来命名（不加时间戳在画连续画第二张图的时候有问题） 212 timestamp: timestamp / 1000 213 const FILE_BASE_NAME = 'tmp_base64' + timestamp; //自定义文件名 因第二张图相同名字读取第一张故加个时间戳 214 console.log(FILE_BASE_NAME) 215 var base64data = vm.properties.adminQrcode; //base64格式图片 216 const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || []; 217 if (!format) { 218 return (new Error('ERROR_BASE64SRC_PARSE')); 219 } 220 const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`; 221 const buffer = wx.base64ToArrayBuffer(bodyData); 222 console.log(filePath) 223 fsm.writeFile({ 224 filePath, 225 data: buffer, 226 encoding: 'binary', 227 success() { 228 filePath; 229 }, 230 fail() { 231 return (new Error('ERROR_BASE64SRC_WRITE')); 232 }, 233 }); 234 console.log(filePath) 235 console.log(wx.env.USER_DATA_PATH) 236 const basepath = `${wx.env.USER_DATA_PATH}` 237 238 vm.setData({ 239 basepath: basepath 240 }); 241 // console.log(filePath === filePath) 242 // console.log(filePath) 243 setTimeout(() => { 244 wx.getImageInfo({ 245 src: filePath, 246 success: function(res) { 247 // 根据 图片的大小 绘制底图 的大小 248 console.log(res) // 绘制底图的图片信息", 249 let imgW = res.width 250 let imgH = res.height 251 let imgPath = res.path 252 vm.setData({ 253 canvasHeight: imgH, 254 canvasWidth: imgW 255 }) 256 // 绘制底图 用原图的宽高比绘制 257 ctx.drawImage(imgPath, 0, 0, 320, 320) 258 // let srclogo = vm.data.codeImg // logo图片的路径 259 // // 绘制logo 260 // ctx.drawImage(srclogo, 12, imgH - 56, 240, 38) 261 262 ctx.setFontSize(14) 263 ctx.setFillStyle('#474B5B') 264 ctx.fillText('账号：' + vm.data.admin_no, 100, 340) 265 ctx.fillText('密码：' + vm.data.admin_pwd, 100, 370); 266 267 ctx.draw() 268 wx.showLoading({ 269 title: '获取图片中...', 270 mask: true 271 }) 272 setTimeout(() => { 273 wx.canvasToTempFilePath({ 274 canvasId: 'myCanvas', 275 success: function(res) { 276 console.log(res) // 合成的带有logo得图片 277 let tempFilePath = res.tempFilePath 278 // 保存到相册 279 console.log(tempFilePath); 280 vm.setData({ 281 tempFilePath: tempFilePath 282 }); 283 wx.hideLoading() 284 return; 285 wx.saveImageToPhotosAlbum({ 286 filePath: tempFilePath, 287 success(res) { 288 fsm.readdir({ // 读取目录内文件列表 289 dirPath: basepath, 290 success(res) { 291 res.files.forEach((val) => { // 遍历文件列表里的数据 292 console.log(val) 293 fsm.unlink({ // 清除writeFile保存的图片 294 filePath: basepath + '/' + val 295 }); 296 }) 297 }, 298 fail(err) { 299 console.log(err) 300 } 301 }) 302 // wx.getSavedFileList({ 303 // success: savedFileInfo => { 304 // let list = savedFileInfo.fileList 305 // console.log("list:", savedFileInfo.fileList) 306 // for (let i = 0; i < list.length; i++) { 307 // wx.removeSavedFile({ 308 // filePath: list[i].filePath, 309 // }) 310 // } 311 // } 312 // }) 313 wx.showModal({ 314 title: '提示', 315 content: '图片保存成功，可在相册中查看', 316 showCancel: false, 317 }) 318 }, 319 320 fail(res) { 321 wx.hideLoading() 322 wx.showModal({ 323 title: '提示', 324 content: '图片保存失败，请重试', 325 showCancel: false 326 }) 327 } 328 }) 329 } 330 }, vm) 331 }, 1000) 332 }, 333 fail(res) { 334 wx.hideLoading() 335 wx.showModal({ 336 title: '提示', 337 content: '图片信息获取失败，请重试', 338 showCancel: false 339 }) 340 } 341 }) 342 }, 100) 343 }, 344 345 })
wxss 文件
1 page { 2 background: #fff; 3 } 4 5 .admin-qrcode { 6 width: 100%; 7 text-align: center; 8 margin-top: 20px; 9 } 10 11 .admin-qrcode image { 12 height: 320px; 13 width: 320px; 14 } 15 16 .admin-info { 17 } 18 19 .admin-info-no { 20 height: 30px; 21 line-height: 30px; 22 text-align: center; 23 margin-top: 10px; 24 } 25 26 .admin-info-pwd { 27 height: 30px; 28 line-height: 30px; 29 text-align: center; 30 margin-top: 10px; 31 } 32 33 .oper-btn { 34 width: 100%; 35 text-align: center; 36 display: -webkit-flex; 37 margin-top: 40px; 38 color: #424656; 39 font-size: 14px; 40 } 41 42 .oper-save { 43 width: 50%; 44 text-align: center; 45 height: 60px; 46 line-height: 30px; 47 margin-top: 30px; 48 } 49 50 .oper-share { 51 width: 50%; 52 text-align: center; 53 height: 60px; 54 line-height: 30px; 55 } 56 57 .oper-icon-save { 58 font-size: 36px; 59 color: #2276ff; 60 } 61 62 .oper-icon-share { 63 font-size: 36px; 64 color: #3cb035; 65 } 66 67 .share-btn { 68 border: none; 69 background: #fff; 70 font-size: 14px; 71 display: inline; 72 line-height: 30px; 73 } 74 75 button::after { 76 border: none; 77 }
