shareQrCode.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. <template>
  2. <view class="content">
  3. <!-- <view class="qrimg">
  4. <tki-qrcode
  5. :cid="cid"
  6. ref="qrcode"
  7. :val="val"
  8. :size="size"
  9. :unit="unit"
  10. :background="background"
  11. :foreground="foreground"
  12. :pdground="pdground"
  13. :icon="icon"
  14. :iconSize="iconSize"
  15. :lv="lv"
  16. :onval="onval"
  17. :loadMake="loadMake"
  18. :usingComponents="usingComponents"
  19. @result="qrR"
  20. />
  21. </view> -->
  22. <!-- #ifndef MP-ALIPAY -->
  23. <canvas :class="{ qrimg: !loading }" @longtap="alertCanv" id="qrShareBox" canvas-id="qrShareBox" class="tki-qrcode-canvas" />
  24. <!-- #endif -->
  25. <!-- #ifdef MP-ALIPAY -->
  26. <canvas :class="{ qrimg: !loading }" @longtap="alertCanv" id="qrShareBox" class="tki-qrcode-canvas" />
  27. <!-- #endif -->
  28. <view :style="{ display: loading ? 'none' : 'block' }" class="tki-qrcode-canvas"><image :src="ctxSrc" mode="scaleToFill" class="tki-qrcode-canvas"></image></view>
  29. <view class="share-bottom flex" :class="{ 'action-share-bottom': !loading }" @click="loading ? showImg() : ''">
  30. <text>{{ loading ? '点击生成图片' : '长按二维码下载' }}</text>
  31. </view>
  32. </view>
  33. </template>
  34. <script>
  35. // import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
  36. import { spreadBanner } from '@/api/user.js';
  37. export default {
  38. // components: { tkiQrcode },
  39. data() {
  40. return {
  41. cid: 'tki-qrcode-canvas', //canvasId,页面存在多个二维码组件时需设置不同的ID
  42. size: 180, //生成的二维码大小
  43. unit: 'upx', //大小单位尺寸
  44. // show: true,//默认使用组件中的image标签显示二维码
  45. val: '', //要生成的内容
  46. background: '#ffffff', //二维码背景色
  47. foreground: '#333333', //二维码前景色
  48. pdground: '#333333', //二维码角标色
  49. icon: '', //二维码图标URL(必须是本地图片,网络图需要先下载至本地)
  50. iconSize: 40, //二维码图标大小
  51. lv: 3, //容错级别
  52. onval: false, //监听val值变化自动重新生成二维码
  53. loadMake: false, //组件初始化完成后自动生成二维码,val需要有值
  54. usingComponents: false, //是否使用了自定义组件模式(主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题)
  55. showLoading: false, //是否显示loading
  56. loadingText: '二维码生成中', //loading文字
  57. src: '', // 二维码生成后的图片地址或base64
  58. ratio: 1, //页面比例用于计算
  59. ctxSrc: '', //要显示的图片
  60. loading: true,//是否载入图片中
  61. canHeight: '',//画布高度
  62. canWeidth: ''//画布宽度
  63. };
  64. },
  65. onLoad() {
  66. this.loadCodeList()
  67. },
  68. onReady() {
  69. let obj = this;
  70. let query = uni.createSelectorQuery();
  71. // 获取页面比例
  72. query
  73. .select('.content')
  74. .fields(
  75. {
  76. size: true
  77. },
  78. e => {
  79. // 保存比例
  80. this.ratio = e.width / 750;
  81. }
  82. )
  83. .exec();
  84. // 获取画布宽高信息
  85. query
  86. .select('#qrShareBox')
  87. .fields(
  88. {
  89. size: true
  90. },
  91. e => {
  92. // 保存画布宽高信息
  93. obj.canHeight = e.height;
  94. obj.canWeidth = e.width;
  95. }
  96. )
  97. .exec();
  98. },
  99. methods: {
  100. loadCodeList() {
  101. // 加载二维码信息
  102. spreadBanner({
  103. // #ifdef H5
  104. type: 2,
  105. // #endif
  106. // #ifdef MP
  107. type: 1
  108. // #endif
  109. }).then(e => {
  110. console.log(e);
  111. // #ifdef MP
  112. // 保存二维码图片
  113. uni.downloadFile({
  114. url: e.data[0].wap_posterQr,
  115. success(res) {
  116. if (res.errMsg == 'downloadFile:ok') {
  117. obj.src = res.tempFilePath;
  118. // 生成画布
  119. obj.loadImg(obj.src);
  120. uni.hideLoading();
  121. }
  122. console.log(res);
  123. },
  124. fail(e) {
  125. console.log(e);
  126. }
  127. })
  128. // #endif
  129. // #ifdef H5
  130. // 保存二维码图片
  131. this.src = e.data[0].wap_posterQr;
  132. // 生成画布
  133. this.loadImg(e.data[0].wap_posterQr);
  134. // #endif
  135. }).catch((e) => {
  136. uni.showModal({
  137. title: '生成失败请刷新页面',
  138. showCancel: false
  139. });
  140. uni.hideLoading();
  141. });;
  142. },
  143. // 长按画布事件
  144. alertCanv() {
  145. uni.showModal({
  146. title: '请先点击生成图片再下载',
  147. showCancel: false
  148. });
  149. },
  150. // 生成图片
  151. showImg() {
  152. uni.showLoading({
  153. title: '图片生成中',
  154. mask: true
  155. });
  156. let obj = this;
  157. //因为和uni.showLoading载入效果冲突需要延迟执行生成图片方法
  158. setTimeout(function() {
  159. uni.canvasToTempFilePath({
  160. x: 0,
  161. y: 0,
  162. width: obj.canWeidth,
  163. height: obj.canHeight,
  164. destWidth: obj.canWeidth,
  165. destHeight: obj.canHeight,
  166. fileType: 'jpg',
  167. quality: 1,
  168. canvasId: 'qrShareBox',
  169. success: res => {
  170. uni.hideLoading();
  171. uni.showModal({
  172. title: '创建成功,长按二维码下载图片',
  173. showCancel: false
  174. });
  175. // 显示生成的图片
  176. obj.loading = false;
  177. // 保存图片base64
  178. obj.ctxSrc = res.tempFilePath;
  179. },
  180. fail(e) {
  181. console.log(e);
  182. }
  183. });
  184. }, 50);
  185. },
  186. // 开始渲染画布
  187. loadImg(src) {
  188. const obj = this;
  189. const cavWidth=523;//画布宽度
  190. const cavHeight=700;//画布高度
  191. const ratio = obj.ratio;//获取页面比例
  192. const ctxBg = '/static/img/img14.jpg'; //画布背景
  193. let context = uni.createCanvasContext('qrShareBox');
  194. const codeSize = obj.size * ratio; //计算二维码大小
  195. const codeX = ((cavWidth - obj.size) * ratio) / 2; //二维码所在x轴位置
  196. const codeY = cavHeight * ratio; //二维码所在y轴位置
  197. const codeBoxColor = '#FFFFFF'; //包裹框颜色
  198. const codeBoxWidht = 0; //包裹边框宽度
  199. const codeBoxSize = (codeBoxWidht / 2) * ratio; //计算二维码白色包裹框大小
  200. const codeBoxX = codeX - codeBoxSize; //包裹框初始X轴
  201. const codeBoxY = codeY - codeBoxSize; //包裹框初始Y轴
  202. const codeBoxEnd = codeSize + codeBoxWidht * ratio; //计算包裹框大小
  203. const fontTop = codeY + codeBoxEnd + (codeBoxWidht + 20) * this.ratio; //文字距离上边距高度
  204. const fontSize = 24 * ratio; //文字大小
  205. const fontText = ''; //文字内容
  206. const fontLeft = (codeSize - fontSize * fontText.length) / 2 + codeX; //文字左侧距离
  207. // 插入背景图片
  208. context.drawImage(ctxBg, 0, 0, obj.canWeidth, obj.canHeight);
  209. // // 插入文字
  210. context.setFontSize(fontSize);
  211. context.fillText(fontText, fontLeft, fontTop);
  212. // 插入边框
  213. context.beginPath();//开始画线
  214. context.setLineJoin('round'); //边框类型
  215. context.setLineWidth(codeBoxWidht * ratio);
  216. context.setStrokeStyle(codeBoxColor); //设置包裹框颜色
  217. context.strokeRect(codeBoxX, codeBoxY, codeBoxEnd, codeBoxEnd);
  218. context.stroke();//渲染线条
  219. // 插入二维码
  220. context.drawImage(src, codeX, codeY, codeSize, codeSize);
  221. // 开始渲染
  222. context.draw();
  223. },
  224. // 創建二维码
  225. creatQrcode() {
  226. this.$refs.qrcode._makeCode();
  227. },
  228. // 保存二维码到图库
  229. saveQrcode() {
  230. this.$refs.qrcode._saveCode();
  231. },
  232. // 生成二维码后返回base64
  233. qrR(res) {
  234. this.src = res;
  235. },
  236. //清空二维码(清空二维码会触发result回调 返回值为空)
  237. clearQrcode(e) {
  238. this.$refs.qrcode._clearCode();
  239. this.val = '';
  240. }
  241. }
  242. };
  243. </script>
  244. <style lang="scss">
  245. .content {
  246. padding-top: 30rpx;
  247. }
  248. // #qrShareBox {
  249. // position: absolute;
  250. // left: -9999rpx;
  251. // top: -9999rpx;
  252. // }
  253. .qrimg {
  254. position: absolute;
  255. left: -9999rpx;
  256. top: -9999rpx;
  257. }
  258. .tki-qrcode-canvas {
  259. // width: 700rpx;
  260. // height: 1245rpx;
  261. width: 532rpx;
  262. height: 945rpx;
  263. margin: 0 auto;
  264. }
  265. .share-bottom {
  266. width: 560rpx;
  267. height: 80rpx;
  268. color: #ffffff;
  269. background-color: $base-color;
  270. margin: 0 auto;
  271. font-size: $font-lg - 2rpx;
  272. margin-top: 30rpx;
  273. border-radius: 99rpx;
  274. justify-content: center;
  275. &.action-share-bottom {
  276. background-color: $color-gray;
  277. }
  278. }
  279. </style>