import Wxml2Canvas from 'wxml2canvas'; export default { methods: { drawMyCanvas() { uni.showLoading({ title: '下载中...' }); const that = this; const query = uni.createSelectorQuery().in(this); query .select('#my-canvas') .fields( { // 选择需要生成canvas的范围 size: true, scrollOffset: true }, (data) => { let width = data.width; let height = data.height; that.width = width; that.height = height; setTimeout(() => { that.startDraw(); }, 1500); } ) .exec(); }, startDraw() { console.log(2); let that = this; // 创建wxml2canvas对象 let drawMyImage = new Wxml2Canvas( { element: 'myCanvas', // canvas的id, obj: that, // 传入当前组件的this width: that.width * 2, height: that.height * 2, progress(percent) { // 进度 // console.log(percent); }, finish(url) { console.log(url); // 生成的图片 uni.hideLoading(); setTimeout(() => { that.savePoster(url); }, 500); }, error(res) { // 失败原因 console.log(res); uni.hideLoading(); } }, this ); let data = { // 获取wxml数据 list: [ { type: 'wxml', class: '.my_canvas .my_draw_canvas', // my_canvas要绘制的wxml元素根类名， my_draw_canvas单个元素的类名（所有要绘制的单个元素都要添加该类名） limit: '.my_canvas', // 要绘制的wxml元素根类名 x: 0, y: 0 } ] }; // 绘制canvas drawMyImage.draw(data, this); }, savePoster(imgUrl) { console.log(3, imgUrl); const that = this; uni.saveImageToPhotosAlbum({ filePath: imgUrl, success: function () { uni.showToast({ title: '保存成功', icon: 'none', duration: 1500 }); }, fail(err) { if ( err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || err.errMsg === 'saveImageToPhotosAlbum:fail auth deny' || err.errMsg === 'saveImageToPhotosAlbum:fail authorize no response' ) { uni.showModal({ title: '提示', content: '需要您授权保存相册', showCancel: false, success: (modalSuccess) => { uni.openSetting({ success(settingdata) { if (settingdata.authSetting['scope.writePhotosAlbum']) { uni.saveImageToPhotosAlbum({ filePath: imgUrl, success: function () { uni.showToast({ title: '保存成功', icon: 'success', duration: 2000 }); } }); } else { uni.showToast({ title: '授权失败，请稍后重新获取', icon: 'none', duration: 1500 }); } } }); } }); } } }); } } };