shareQrCode.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
  1. <template>
  2. <view class="container">
  3. <canvas :style="{ width: canvasW + 'px', height: canvasH + 'px',}" canvas-id="myCanvas" id="myCanvas" class="hb"></canvas>
  4. <!-- #ifndef MP -->
  5. <div class="preserve">
  6. <div class="line"></div>
  7. <div class="tip">长按保存图片</div>
  8. <div class="line"></div>
  9. </div>
  10. <!-- #endif -->
  11. <!-- #ifdef MP -->
  12. <view class='keep' @click='saveShareQrcode' v-if="!loading">保存海报</view>
  13. <!-- #endif -->
  14. </view>
  15. </template>
  16. <script>
  17. import {
  18. spreadBanner,
  19. getWxmpInviteQrcode
  20. } from '@/api/user.js';
  21. import {
  22. qrcode
  23. } from '@/api/user.js';
  24. import {
  25. mapState
  26. } from 'vuex';
  27. export default {
  28. // #ifdef MP
  29. onShareAppMessage: function(res) {
  30. // if (res.from === 'button') {
  31. // 保存邀请人
  32. let path = '/pages/index/index?' + 'spread=' + this.userInfo.uid;
  33. console.log('path', path)
  34. let data = {
  35. path: path,
  36. imageUrl: this.poster,
  37. title: this.userInfo.nickname + '邀请您进入母婴界严选'
  38. };
  39. console.log('---data---', data)
  40. return data;
  41. // }
  42. },
  43. // #endif
  44. data() {
  45. return {
  46. canvasW: '',
  47. canvasH: '',
  48. bgimg: '',
  49. qrimg: '',
  50. shareList: [],
  51. swiperIndex: 0,
  52. poster: '', // 当前海报
  53. loading: true
  54. }
  55. },
  56. onLoad(option) {
  57. // console.log('---option---',option)
  58. // let path = '/pages/index/index?' + 'spread=' + this.userInfo.uid;
  59. // console.log('path',path)
  60. // if(option.scene){
  61. // // 存储邀请人
  62. // this.spread = opt.pid;
  63. // uni.setStorageSync('spread', opt.pid);
  64. // }
  65. this.loadData();
  66. },
  67. computed: {
  68. ...mapState(['userInfo']),
  69. },
  70. methods: {
  71. bindchange(e) {
  72. let shareList = this.shareList;
  73. this.swiperIndex = e.detail.current;
  74. // #ifdef MP
  75. this.poster = shareList[this.swiperIndex].poster;
  76. // #endif
  77. // // #ifndef MP
  78. // this.poster = shareList[this.swiperIndex].wap_poster;
  79. // // #endif
  80. console.log(this.poster)
  81. },
  82. // 保存海报
  83. savePosterPath: function() {
  84. let that = this;
  85. if (that.poster == '') {
  86. // that.poster = that.shareList[0].poster;
  87. that.poster = this.bgimg
  88. }
  89. uni.downloadFile({
  90. url: that.poster,
  91. success(resFile) {
  92. if (resFile.statusCode === 200) {
  93. uni.getSetting({
  94. success(res) {
  95. if (!res.authSetting['scope.writePhotosAlbum']) {
  96. uni.authorize({
  97. scope: 'scope.writePhotosAlbum',
  98. success() {
  99. uni.saveImageToPhotosAlbum({
  100. filePath: resFile.tempFilePath,
  101. success: function(res) {
  102. return that.$api.msg(
  103. '保存成功');
  104. },
  105. fail: function(res) {
  106. return that.$api.msg(res
  107. .errMsg);
  108. },
  109. complete: function(res) {},
  110. })
  111. },
  112. fail() {
  113. uni.showModal({
  114. title: '您已拒绝获取相册权限',
  115. content: '是否进入权限管理,调整授权?',
  116. success(res) {
  117. if (res.confirm) {
  118. uni.openSetting({
  119. success: function(
  120. res) {
  121. console
  122. .log(
  123. res
  124. .authSetting
  125. )
  126. }
  127. });
  128. } else if (res.cancel) {
  129. return that.$api.msg(
  130. '已取消!');
  131. }
  132. }
  133. })
  134. }
  135. })
  136. } else {
  137. uni.saveImageToPhotosAlbum({
  138. filePath: resFile.tempFilePath,
  139. success: function(res) {
  140. return that.$api.msg('保存成功');
  141. },
  142. fail: function(res) {
  143. return that.$api.msg(res.errMsg);
  144. },
  145. complete: function(res) {},
  146. })
  147. }
  148. },
  149. fail(res) {
  150. }
  151. })
  152. } else {
  153. return that.$api.msg(resFile.errMsg);
  154. }
  155. },
  156. fail(res) {
  157. return that.$api.msg(res.errMsg);
  158. }
  159. })
  160. },
  161. // #ifdef MP-WEIXIN
  162. // 保存画图图片到本地
  163. seav(url) {
  164. uni.showLoading({
  165. title: '生成中...',
  166. mask: true
  167. });
  168. uni.saveImageToPhotosAlbum({
  169. filePath: this.poster,
  170. complete(result) {
  171. uni.hideLoading();
  172. console.log(result);
  173. uni.showToast({
  174. title: '保存图片成功!',
  175. duration: 2000,
  176. icon: 'none'
  177. });
  178. }
  179. });
  180. },
  181. // #endif
  182. // 获取海报
  183. loadData() {
  184. let obj = this;
  185. uni.showLoading({
  186. title: '获取中',
  187. mask: true,
  188. });
  189. // spreadBanner({
  190. // // #ifdef H5
  191. // type: 2,
  192. // // #endif
  193. // // #ifdef MP
  194. // type: 1
  195. // // #endif
  196. // }).then(res =>{
  197. // uni.hideLoading();
  198. // obj.shareList = res.data;
  199. // console.log('obj.shareList',obj.shareList);
  200. // }).catch(err => {
  201. // uni.hideLoading();
  202. // });
  203. getWxmpInviteQrcode().then(res => {
  204. console.log(res)
  205. obj.bgimg = res.data.bgimg
  206. obj.qrcode = res.data.qrcode
  207. uni.hideLoading();
  208. obj.createPoster()
  209. })
  210. },
  211. async createPoster() {
  212. let that = this
  213. // 获取设备信息,主要获取宽度,赋值给canvasW 也就是宽度:100%
  214. this.SystemInfo = await this.getSystemInfo();
  215. // 获取商品主图,二维码信息,APP端会返回图片的本地路径(H5端只能返回原路径)
  216. this.goodsImg = await this.getImageInfo(that.bgimg);
  217. this.ewmImg = await this.getImageInfo(that.qrcode);
  218. this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
  219. this.ratio = this.SystemInfo.windowWidth / 750;
  220. let x = 750*this.goodsImg.height/this.goodsImg.width
  221. // this.canvasW =750 * this.ratio;
  222. this.canvasH = x * this.ratio;
  223. this.ewmW = 220 * this.ratio;
  224. console.log(this.canvasH, 'this.canvasH')
  225. // this.canvasH = this.goodsImg.height + this.ewmW + 200; // 画布高度 = 主图高度+二维码高度 + 文字图片的间距(大概50)
  226. // 如果主图,二维码图片,设备信息都获取成功,开始绘制海报,这里需要用setTimeout延时绘制,否则可能会出现图片不显示。
  227. if (this.goodsImg.errMsg == 'getImageInfo:ok' && this.ewmImg.errMsg == 'getImageInfo:ok' && this
  228. .SystemInfo.errMsg == 'getSystemInfo:ok') {
  229. console.log('ok')
  230. uni.showToast({
  231. icon: 'loading',
  232. mask: true,
  233. duration: 10000,
  234. title: '海报绘制中',
  235. });
  236. setTimeout(() => {
  237. var ctx = uni.createCanvasContext('myCanvas', this);
  238. // 填充背景色,白色
  239. ctx.setFillStyle('#fff'); // 默认白色
  240. ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度,高度)
  241. // 绘制商品主图,二维码
  242. ctx.drawImage(this.goodsImg.path, 0, 0, this.canvasW, this
  243. .canvasH) // drawImage(图片路径,x,y,绘制图像的宽度,绘制图像的高度)
  244. ctx.drawImage(this.ewmImg.path, (this.canvasW / 2 - this.ewmW / 2),this.canvasH - 85*this.ratio - this.ewmW,
  245. this.ewmW, this.ewmW) // drawImage(图片路径,x,y,绘制图像的宽度,绘制图像的高度,二维码的宽,高)
  246. // 3、绘制商品标题,多余文字自动换行
  247. ctx.setFontSize(16); // setFontSize() 设置字体字号
  248. ctx.setFillStyle('#333'); // setFillStyle() 设置字体颜色
  249. ctx.draw(false, (ret) => { // draw方法 把以上内容画到 canvas 中。
  250. console.log(ret)
  251. uni.showToast({
  252. icon: 'none',
  253. title: '生成成功!',
  254. });
  255. that.loading = false
  256. that.fina = true
  257. uni.canvasToTempFilePath({ // 保存canvas为图片
  258. canvasId: 'myCanvas',
  259. quality: 1,
  260. fileType: 'jpg',
  261. complete: function(res) {
  262. // 在H5平台下,tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败,APP端正常输出临时路径
  263. console.log(res)
  264. that.canvasShow = false
  265. that.shareQrcodeUrl = res.tempFilePath
  266. that.$forceUpdate()
  267. setTimeout(function() {
  268. console.log(that.shareQrcodeUrl, that
  269. .canvasShow)
  270. }, 2000)
  271. },
  272. })
  273. });
  274. }, 1500)
  275. } else {
  276. console.log('err')
  277. }
  278. },
  279. // 获取设备信息
  280. getSystemInfo() {
  281. return new Promise((req, rej) => {
  282. uni.getSystemInfo({
  283. success: function(res) {
  284. req(res)
  285. }
  286. });
  287. })
  288. },
  289. // 获取图片信息
  290. getImageInfo(image) {
  291. return new Promise((req, rej) => {
  292. uni.getImageInfo({
  293. src: image,
  294. success: function(res) {
  295. req(res)
  296. },
  297. });
  298. })
  299. },
  300. //保存图片
  301. saveShareQrcode() {
  302. console.log(this.shareQrcodeUrl)
  303. uni.saveImageToPhotosAlbum({
  304. filePath: this.shareQrcodeUrl,
  305. success: (res) => {
  306. uni.showToast({
  307. icon: 'none',
  308. position: 'bottom',
  309. title: "成功保存到相册",
  310. });
  311. },
  312. fail: (err) => {
  313. //重新提示用户打开保存图片的授权
  314. if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
  315. uni.showModal({
  316. title: '提示',
  317. content: '需要您授权保存相册',
  318. showCancel: false,
  319. success(res) {
  320. if (res.confirm) {
  321. uni.openSetting({
  322. success(settingdata) {
  323. if (settingdata.authSetting[
  324. 'scope.writePhotosAlbum']) {
  325. uni.showModal({
  326. title: '提示',
  327. content: '获取权限成功,再次保存图片即可成功',
  328. showCancel: false,
  329. })
  330. } else {
  331. uni.showModal({
  332. title: '提示',
  333. content: '获取权限失败,无法保存到相册',
  334. showCancel: false
  335. })
  336. }
  337. }
  338. })
  339. }
  340. }
  341. })
  342. }
  343. },
  344. })
  345. }
  346. }
  347. }
  348. </script>
  349. <style lang="scss">
  350. page {
  351. background: #a3a3a3;
  352. height: 100%;
  353. }
  354. .container {
  355. width: 100%;
  356. padding-bottom: 100rpx;
  357. .posters-box {
  358. width: 100%;
  359. height: 1000rpx;
  360. margin-top: 40rpx;
  361. .slide-image {
  362. width: 100%;
  363. height: 100%;
  364. border-radius: 15rpx;
  365. }
  366. }
  367. .posters-box .slide-image.active {
  368. transform: none;
  369. transition: all 0.2s ease-in 0s;
  370. }
  371. .posters-box .slide-image.quiet {
  372. transform: scale(0.8333333);
  373. transition: all 0.2s ease-in 0s;
  374. }
  375. .keep {
  376. font-size: 30rpx;
  377. background: $base-color;
  378. color: #fff;
  379. width: 750rpx;
  380. position: fixed;
  381. height: 100rpx;
  382. text-align: center;
  383. line-height: 100rpx;
  384. bottom: 0;
  385. left: 0;
  386. }
  387. }
  388. .preserve {
  389. color: #fff;
  390. text-align: center;
  391. margin-top: 38rpx;
  392. display: flex;
  393. align-items: center;
  394. justify-content: center;
  395. .line {
  396. width: 100rpx;
  397. height: 1px;
  398. background-color: #fff;
  399. }
  400. .tip {
  401. margin: 0 20rpx;
  402. font-size: 28rpx;
  403. }
  404. }
  405. .hb {
  406. margin: auto;
  407. }
  408. </style>