{"id":1167,"date":"2023-06-04T17:31:00","date_gmt":"2023-06-04T09:31:00","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=1167"},"modified":"2023-05-26T14:40:49","modified_gmt":"2023-05-26T06:40:49","slug":"vue-canvas%e6%b5%b7%e6%8a%a5%e7%bb%98%e5%88%b6%e4%b8%8e%e4%bf%9d%e5%ad%98%e5%9b%be%e7%89%87","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=1167","title":{"rendered":"vue-canvas\u6d77\u62a5\u7ed8\u5236\u4e0e\u4fdd\u5b58\u56fe\u7247"},"content":{"rendered":"\n<p>\u524d\u6bb5\u65f6\u95f4\u505a\u4e86\u4e00\u4e2aweb\u5c0f\u7a0b\u5e8f\u9879\u76ee\uff0c\u4e1a\u52a1\u4e0a\u6709\u4fdd\u5b58\u6d77\u62a5\u5e76\u5206\u4eab\u9700\u6c42\uff0c\u6240\u4ee5\u54b1\u5c31\u5f00\u59cb\u52a8\u624b\u62c6\u5206-\u5c01\u88c5\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2023\/04\/image.png\" alt=\"\" class=\"wp-image-1171\" width=\"169\" height=\"294\" srcset=\"http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2023\/04\/image.png 503w, http:\/\/blog.xrhoujie.com\/wp-content\/uploads\/2023\/04\/image-172x300.png 172w\" sizes=\"(max-width: 169px) 100vw, 169px\" \/><\/figure>\n\n\n\n<p>\u5148\u770b\u7236\u7ec4\u4ef6\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div&gt;\n&lt;shareCanvasCom :orderXhrData=\"orderXhrData\" :loginInfo=\"loginInfo\" ref=\"child\" :qrcodePath=\"qrcodePath\"\/&gt;\n&lt;\/div&gt;\n&lt;script&gt;\nimport shareCanvasCom from \"..\/components\/shareCanvas\/index.vue\"\nexport default {\n\n\tcomponents: {\n\t   shareCanvasCom,\n\t\t},\ndata() {\n  return {\n<meta charset=\"utf-8\">orderXhrData:&#91;],\/\/\u8ba2\u5355\u4fe1\u606f\n<meta charset=\"utf-8\">loginInfo:{},\/\/\u7528\u6237\u4fe1\u606f\n<meta charset=\"utf-8\">qrcodePath:'\u56fe\u7247url'\uff0c\n   }\n}\n&lt;\/script&gt;\n\t\t\t\t<\/code><\/pre>\n\n\n\n<p>\u770b\u5b50\u7ec4\u4ef6<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div&gt;\n &lt;div class=\"canvas-box\"&gt;\t\t\t\t\n\t&lt;image v-if=\"tempFilePath !== ''\" :src=\"tempFilePath\" \/&gt;&lt;\/image&gt;\n\t&lt;div style=\"position:relative;\" v-if=\"tempFilePath !== ''\"&gt;\n\t&lt;image src=\"..\/static\/images\/posterClose.png\"  &gt;&lt;\/image&gt;\n        &lt;\/div&gt;\n &lt;\/div&gt;\n&lt;\/div&gt;\n\n\nmethods.js\n\nimport Apis from '@\/common\/apis\/index'\nimport GroupBuyingApis from '@\/common\/apis\/shop.js'\nlet isOneMove = false\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\timgUrl: '',\n\t\t\twindowWidth: 0,\n\t\t\twindowHeight: 0,\n\t\t\tossKey: '',\n\t\t\ttempFilePath: '',\n\n\t\t\tphotoPath: '',\n\t\t\t\/\/ qrcodePath: '',\n\t\t\tctx: null,\n\t\t\tcw: 654 \/ 2, \/\/ \u539f\u56fe\u5bbd\u5ea6-20  \u56e0\u4e3abox css \u670920\u5de6\u53f3\u5185\u8fb9\u8ddd\n\t\t\tch: 1022 \/ 2,\n\t\t\tmultiple: 0,\n\t\t\tdistance: 0, \/\/ \u624b\u6307\u79fb\u52a8\u7684\u8ddd\u79bb\n\t\t\tdistanceDiff: 0,\n\t\t\tscale: 1, \/\/ \u7f29\u653e\u6bd4\u4f8b\n\t\t\tpositionx: 0,\n\t\t\tpositiony: 150,\n\t\t\tstarx: '',\n\t\t\tstary: '',\n\t\t\tmovex: '',\n\t\t\tmovey: '',\n\t\t\tpath1: '..\/..\/..\/static\/images\/groupOrder\/shareBg.png',\n\t\t\tbanner:'..\/..\/..\/static\/images\/groupOrder\/shareBanner2.png',\n\t\t\twxCode:'',\n\t\t\tpath2: '',\n\t\t\tpath2w: 0,\n\t\t\tpath2h: 0,\n\t\t};\n\t},\n\tonLoad(options) {\n\t},\n\tasync beforeUpdate(){\n\t\tlet app = getApp();\n\t\t\/\/ console.log(app);\n\t\tthis.imgUrl = app.globalData.imgUrl;\n\t\tthis.windowWidth = uni.getSystemInfoSync().windowWidth;\n\t\tthis.windowHeight = uni.getSystemInfoSync().windowHeight;\n\t\tawait this.$nextTick();\n\t\t\/\/ this.photoPath = uni.getStorageSync('eye_photo_path')\n\t\tthis.photoPath ='..\/..\/..\/static\/images\/groupOrder\/shareBg.png'\n\t},\n\tmethods: {\n\t\tasync loadingWxCode(){\n\t\t\tif(this.qrcodePath){ \/\/typeof this.qrcodePath !== 'undefined' &amp;&amp; this.qrcodePath.trim() !== ''\n\t\t\t\tconst img = new Image()\n\t\t\t\timg.src = this.qrcodePath;\n\t\t\t\timg.onload = (res) =&gt; {\n\t\t\t\t\t this.drawRoundWxCode()\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tasync drawRoundWxCode(){\n\t\t\t\/\/\u5706\u89d2\u56fe\u7247\n\t\t\tvar avatar_width = 75;    \/\/\u7ed8\u5236\u7684\u56fe\u7247\u5bbd\u5ea6\n\t\t\tvar avatar_heigth = 75;  \/\/\u7ed8\u5236\u7684\u56fe\u7247\u9ad8\u5ea6\n\t\t\tvar avatar_x = 247;  \/\/\u7ed8\u5236\u7684\u56fe\u7247\u5728\u753b\u5e03\u4e0a\u7684\u4f4d\u7f6e\n\t\t\tvar avatar_y = 430;  \/\/\u7ed8\u5236\u7684\u56fe\u7247\u5728\u753b\u5e03\u4e0a\u7684\u4f4d\u7f6e\n\t\t\t\n\t\t\tthis.ctx.save();\n\t\t\t\/\/\u5148\u7ed8\u5236\u4e00\u4e2a\u906e\u7f69\u5c42---\n\t\t\tthis.ctx.beginPath(); \/\/\u5f00\u59cb\u7ed8\u5236\n\t\t\t\/\/\u5148\u753b\u4e2a\u5706  \u524d\u4e24\u4e2a\u53c2\u6570\u786e\u5b9a\u4e86\u5706\u5fc3 \uff08x,y\uff09 \u5750\u6807  \u7b2c\u4e09\u4e2a\u53c2\u6570\u662f\u5706\u7684\u534a\u5f84  \u56db\u53c2\u6570\u662f\u7ed8\u56fe\u65b9\u5411  \u9ed8\u8ba4\u662ffalse\uff0c\u5373\u987a\u65f6\u9488\n\t\t\tthis.ctx.arc(avatar_width \/ 2 + avatar_x, avatar_heigth \/ 2 + avatar_y, avatar_width \/ 2, 0, Math.PI * 2, false);\n\t\t\tthis.ctx.fillStyle=\"#fff\";\/\/\u8bbe\u7f6e\u586b\u5145\u989c\u8272\n\t\t\tthis.ctx.fill();\/\/\u5f00\u59cb\u586b\u5145\n\t\t\t\n\t\t\t\/\/\u6b63\u5f0f\u7ed8\u5236\u5706\u89d2\u56fe\u7247\n\t\t\tthis.ctx.beginPath(); \/\/\u5f00\u59cb\u7ed8\u5236\n\t\t\t\/\/\u5148\u753b\u4e2a\u5706  \u524d\u4e24\u4e2a\u53c2\u6570\u786e\u5b9a\u4e86\u5706\u5fc3 \uff08x,y\uff09 \u5750\u6807  \u7b2c\u4e09\u4e2a\u53c2\u6570\u662f\u5706\u7684\u534a\u5f84  \u56db\u53c2\u6570\u662f\u7ed8\u56fe\u65b9\u5411  \u9ed8\u8ba4\u662ffalse\uff0c\u5373\u987a\u65f6\u9488\n\t\t\tthis.ctx.arc(avatar_width \/ 2 + avatar_x, avatar_heigth \/ 2 + avatar_y, avatar_width \/ 2, 0, Math.PI * 2, false);\n\t\t\tthis.ctx.clip();\/\/\u753b\u597d\u4e86\u5706 \u526a\u5207  \u539f\u59cb\u753b\u5e03\u4e2d\u526a\u5207\u4efb\u610f\u5f62\u72b6\u548c\u5c3a\u5bf8\u3002\u4e00\u65e6\u526a\u5207\u4e86\u67d0\u4e2a\u533a\u57df\uff0c\u5219\u6240\u6709\u4e4b\u540e\u7684\u7ed8\u56fe\u90fd\u4f1a\u88ab\u9650\u5236\u5728\u88ab\u526a\u5207\u7684\u533a\u57df\u5185 \u8fd9\u4e5f\u662f\u6211\u4eec\u8981save\u4e0a\u4e0b\u6587\u7684\u539f\u56e0\n\t\t\tthis.ctx.drawImage(this.qrcodePath+'?t='+ new Date().getTime(), avatar_x+2.5, avatar_y+2.5, avatar_width-5, avatar_heigth-5); \/\/ \u63a8\u8fdb\u53bb\u56fe\u7247\uff0c\u5fc5\u987b\u662fhttps\u56fe\u7247\n\t\t\tthis.ctx.restore(); \/\/\u6062\u590d\u4e4b\u524d\u4fdd\u5b58\u7684\u7ed8\u56fe\u4e0a\u4e0b\u6587 \u6062\u590d\u4e4b\u524d\u4fdd\u5b58\u7684\u7ed8\u56fe\u4e0a\u4e0b\u5348\u5373\u72b6\u6001 \u8fd8\u53ef\u4ee5\u7ee7\u7eed\u7ed8\u5236\n\t\t\tthis.ctx.draw(true)\n\t\t\t\/\/ this.onSave()\n\t\t\tsetTimeout(()=&gt; { this.onSaveImages()}, 500)\n\t\t},\n\t\t\/\/ \u5f00\u59cb\u753b\u56fe\uff08\u670b\u53cb\u5708\u5206\u4eab\u56fe\u7247\uff09\n\t\tasync inCanvas() {\n\t\t\ttry {\n\t\t\t\tconst _this = this\n\t\t\t\tlet cw = this.cw\n\t\t\t\tlet ch = this.ch\n\t\t\t\tthis.ctx = uni.createCanvasContext('ShareCanvas', this)\n\t\t\t\t\/\/ this.ctx.setFillStyle('#7f7f7f')\n\t\t\t\tthis.ctx.fillStyle = 'rgba(0, 0, 0, 0)';\n\t\t\t\tthis.ctx.fillRect(0, 0, cw, ch)\n\t\t\t\tuni.getImageInfo({\n\t\t\t\t\tsrc: _this.photoPath,\n\t\t\t\t\tsuccess(res) {\n\t\t\t\t\t\t_this.drawBottomBg(res)\n\t\t\t\t\t\t\/\/ _this.path2 = res.path\n\t\t\t\t\t\t\/\/ _this.multiple = res.width \/ cw\n\t\t\t\t\t\t\/\/ \/\/ \u7b49\u6bd4\u4f8b\u8ba1\u7b97\u51fa\u9ed8\u8ba4\u5bbd\u9ad8\n\t\t\t\t\t\t\/\/ _this.path2w = _this.multiple &gt; 1 ? cw : res.width;\n\t\t\t\t\t\t\/\/ _this.path2h = _this.multiple &gt; 1 ? res.height \/ _this.multiple : res.height;\n\t\t\t\t\t\t\/\/ _this.ctx.drawImage(_this.path2+'?t='+ new Date().getTime(), _this.positionx, _this.positiony, _this.path2w, _this.path2h)\n\t\t\t\t\t\t\/\/ \u7ed8\u5236\u4e8c\u7ef4\u7801\n\t\t\t\t\t\t_this.loadingWxCode()\n\t\t\t\t\t\t\/\/ \u80cc\u666f\n\t\t\t\t\t\t_this.drawPosterBg();\n\t\t\t\t\t\t\/\/\u540d\u79f0\n\t\t\t\t\t\tlet userInfo = uni.getStorageSync('userInfo');\n\t\t\t\t\t\tif(!userInfo){\n\t\t\t\t\t\t\tuserInfo = _this.loginInfo;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif(userInfo.name){\n\t\t\t\t\t\t\t_this.ctx.setFillStyle(\"#666666\");\n\t\t\t\t\t\t\t_this.ctx.setFontSize(14);\n\t\t\t\t\t\t\t_this.ctx.setTextAlign(\"center\");\n\t\t\t\t\t\t\t_this.ctx.fillText(userInfo.name,  _this.path2w\/2, 85);\n\t\t\t\t\t\t}\n\t\t\t\t\t\t\/\/\u6807\u9898\u5185\u5bb9\n\t\t\t\t\t\t_this.ctx.setFillStyle(\"#333333\");\n\t\t\t\t\t\t_this.ctx.setFontSize(18);\n\t\t\t\t\t\t_this.ctx.setTextAlign(\"left\");\n\t\t\t\t\t\t_this.ctx.fillText('\u6211\u53d1\u73b0\u4e86\u4e00\u4e2a\u5f88\u68d2\u7684\u5b9d\u8d1d\uff01',  59, 115);\n\t\t\t\t\t\t\/\/ \u6d77\u62a5\u56fe\u7247\n\t\t\t\t\t\tif(!_this.goodsItemData.bannerList || !_this.goodsItemData.bannerList&#91;0]){\n\t\t\t\t\t\t\t_this.ctx.drawImage(_this.banner + '?t='+ new Date().getTime(), 19, 130, 288, 185)\t\t\n\t\t\t\t\t\t\t}else{\n\t\t\t\t\t\t\t\tlet bannerData = _this.goodsItemData.bannerList&#91;0].banner;\n\t\t\t\t\t\t\t\t_this.ctx.drawImage(bannerData + '?t='+ new Date().getTime(), 19, 130, 288, 185)\t\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\/\/ let bannerData = _this.goodsItemData.bannerList&#91;0];\n\t\t\t\t\t\t\/\/ \/\/\u53d8\u91cf\u5b58\u5728\u4e14\u5b50\u9879\u4e0d\u7b49\u4e8e\u7a7a\u5b57\u7b26\u4e32\n\t\t\t\t\t\t\/\/ if(typeof bannerData !== 'undefined' &amp;&amp; bannerData.banner.trim() !== ''){\n\t\t\t\t\t\t\/\/ \t_this.ctx.drawImage(bannerData.banner+'?t='+ new Date().getTime(), 19, 130, 288, 185)\n\t\t\t\t\t\t\/\/ }\n\t\t\t\t\t\t\n\t\t\t\t\t\t\/\/ \u8be6\u60c5\n\t\t\t\t\t\tif(_this.goodsItemData.name){\n\t\t\t\t\t\t\t_this.ctx.setFillStyle(\"#333333\");\n\t\t\t\t\t\t\t_this.ctx.font = \"PingFang SC bold 16px Arial\";\n\t\t\t\t\t\t\t_this.ctx.setTextAlign(\"left\");\n\t\t\t\t\t\t\t_this.ctx.setTextBaseline(\"middle\");\n\t\t\t\t\t\t\t_this.drawText(_this.ctx, _this.goodsItemData.name, 40 \/ 2, 705 \/ 2, 380 \/ 2);\n\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t\t\/\/\u7ed8\u5236\u4ef7\u683c\n\t\t\t\t\t\t_this.drawPriceGroup()\n\t\t\t\t\t\t\n\t\t\t\t\t\t\/\/ \u5df2\u51fa\u552e\u6587\u672c\n\t\t\t\t\t\tif(_this.goodsItemData.sellNumber){\n\t\t\t\t\t\t\t_this.ctx.setFillStyle(\"#999999\");\n\t\t\t\t\t\t\t\/\/ _this.ctx.setFontSize(12);\n\t\t\t\t\t\t\t_this.ctx.font = \"PingFang SC 12px Arial\";\n\t\t\t\t\t\t\t_this.ctx.setTextAlign(\"left\");\n\t\t\t\t\t\t\t_this.ctx.fillText(\"\u5df2\u552e\"+_this.goodsItemData.sellNumber+'\u4efd', 45 \/ 2, 800 \/ 2);\n\t\t\t\t\t\t}\n\t\t\t\t\t\t\/\/ \u7ed8\u5236\u7528\u6237\u5706\u89d2\u5934\u50cf\t\t\t\t\n\t\t\t\t\t\tif(userInfo.avatar){\n\t\t\t\t\t\t\t_this.drawUserHead(userInfo);\n\t\t\t\t\t\t}\n\t\t\t\t\t\t_this.ctx.draw(true);\n\t\t\t\t\t},\n\t\t\t\t\tfail(res){\n\t\t\t\t\t\tconsole.log(res);\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t\/\/ setTimeout(()=&gt; { this.onSaveImages()}, 1500)\n\t\t\t} catch (error) {\n\t\t\t\tconsole.error(error)\n\t\t\t}\n\t\t},\n\t\t\/\/ \u6587\u672c\u6362\u884c\n\t\tdrawText(ctx, t, x, y, w) {\n\t\t  let chr = t.split(\"\");\n\t\t  let temp = \"\";\n\t\t  let row = &#91;];\n\t\t  for (var a = 0; a &lt; chr.length; a++) {\n\t\t    if (ctx.measureText(temp).width &gt;= w) {\n\t\t      row.push(temp);\n\t\t      temp = \"\";\n\t\t    }\n\t\t    temp += chr&#91;a];\n\t\t  }\n\t\t  row.push(temp);\n\t\t  for (var b = 0; b &lt; row.length; b++) {\n\t\t    ctx.fillText(row&#91;b], x, y + (b + 1) * 22);\n\t\t  }\n\t\t},\n\t\tdrawBottomBg(res){\n\t\t\tlet cw = this.cw\n\t\t\tlet ch = this.ch\n\t\t\tthis.path2 = res.path\n\t\t\tthis.multiple = res.width \/ cw\n\t\t\t\/\/ \u7b49\u6bd4\u4f8b\u8ba1\u7b97\u51fa\u9ed8\u8ba4\u5bbd\u9ad8\n\t\t\tthis.path2w = this.multiple &gt; 1 ? cw : res.width;\n\t\t\tthis.path2h = this.multiple &gt; 1 ? (res.height \/ this.multiple)+20 : res.height;\n\t\t\t\n\t\t\t\/\/ const radius = 5; \/\/ \u5706\u89d2\u534a\u5f84\n\t\t\tconst topLeftRadius = 15;     \/\/ \u5de6\u4e0a\u89d2\u5706\u89d2\u534a\u5f84\n\t\t\tconst topRightRadius = 15;    \/\/ \u53f3\u4e0a\u89d2\u5706\u89d2\u534a\u5f84\n\t\t\tconst bottomLeftRadius = 25;   \/\/ \u5de6\u4e0b\u89d2\u5706\u89d2\u534a\u5f84\n\t\t\tconst bottomRightRadius = 25; \/\/ \u53f3\u4e0b\u89d2\u5706\u89d2\u534a\u5f84\n\t\t\t\t\n\t\t\tthis.ctx.beginPath();\n\t\t\tthis.ctx.moveTo(topLeftRadius, 0);\n\t\t\tthis.ctx.lineTo(this.path2w - topRightRadius, 0);\n\t\t\tthis.ctx.arcTo(this.path2w, 0, this.path2w, topRightRadius, topRightRadius);\n\t\t\tthis.ctx.lineTo(this.path2w, this.path2h - bottomRightRadius);\n\t\t\tthis.ctx.arcTo(this.path2w, this.path2h, this.path2w - bottomRightRadius, this.path2h, bottomRightRadius);\n\t\t\tthis.ctx.lineTo(bottomRightRadius, this.path2h);\n\t\t\tthis.ctx.arcTo(0, this.path2h, 0, this.path2h - bottomLeftRadius, bottomLeftRadius);\n\t\t\tthis.ctx.lineTo(0, topLeftRadius);\n\t\t\tthis.ctx.arcTo(0, 0, topLeftRadius, 0, topLeftRadius);\n\t\t\tthis.ctx.closePath(); \/\/ \u5173\u95ed\u8def\u5f84\n\t\t\t\t\t\t\n\t\t\t\/\/ \u5c06\u8def\u5f84\u8bbe\u4e3a\u526a\u5207\u533a\u57df\n\t\t\tthis.ctx.clip();\n\t\t\t\n\t\t\tthis.ctx.drawImage(this.path2+ '?t='+ new Date().getTime(), this.positionx, this.positiony, this.path2w, this.path2h)\n\t\t},\n\t\tdrawPosterBg(){\n\t\t\tlet cw = this.cw\n\t\t\tlet ch = this.ch\n\t\t\tconst radius = 5; \/\/ \u5706\u89d2\u534a\u5f84\n\t\t\t\tthis.ctx.beginPath();\n\t\t\t\tthis.ctx.moveTo(radius, 0);\n\t\t\t\tthis.ctx.lineTo(cw - radius, 0);\n\t\t\t\tthis.ctx.arcTo(cw, 0, cw, radius, radius);\n\t\t\t\tthis.ctx.lineTo(cw, ch - radius);\n\t\t\t\tthis.ctx.arcTo(cw, ch, cw - radius, ch, radius);\n\t\t\t\tthis.ctx.lineTo(radius, ch);\n\t\t\t\tthis.ctx.arcTo(0, ch, 0, ch - radius, radius);\n\t\t\t\tthis.ctx.lineTo(0, radius);\n\t\t\t\tthis.ctx.arcTo(0, 0, radius, 0, radius);\n\t\t\t\tthis.ctx.closePath(); \/\/ \u5173\u95ed\u8def\u5f84\n\t\t\t\t\/\/ \u5c06\u8def\u5f84\u8bbe\u4e3a\u526a\u5207\u533a\u57df\n\t\t\t\tthis.ctx.clip();\n\t\t\t\t\/\/ \u5728\u526a\u5207\u533a\u57df\u5185\u7ed8\u5236\u56fe\u50cf\n\t\t\t\tthis.ctx.drawImage(this.path1+ '?t='+ new Date().getTime(),0, 0, cw, ch);\n\t\t\t\tthis.ctx.draw(true)\t\t\n\t\t},\n\t\tdrawUserHead(userInfo){\n\t\t\t\/\/\u5706\u89d2\u5934\u50cf\n\t\t\tvar avatar_width = 44;    \/\/\u7ed8\u5236\u7684\u5934\u50cf\u5bbd\u5ea6\n\t\t\tvar avatar_heigth = 44;  \/\/\u7ed8\u5236\u7684\u5934\u50cf\u9ad8\u5ea6\n\t\t\tvar avatar_x = 146;  \/\/\u7ed8\u5236\u7684\u5934\u50cf\u5728\u753b\u5e03\u4e0a\u7684\u4f4d\u7f6e\n\t\t\tvar avatar_y = 20;  \/\/\u7ed8\u5236\u7684\u5934\u50cf\u5728\u753b\u5e03\u4e0a\u7684\u4f4d\u7f6e\n\t\t\t\n\t\t\tthis.ctx.save();\n\t\t\tthis.ctx.beginPath(); \/\/\u5f00\u59cb\u7ed8\u5236\n\t\t\t\/\/\u5148\u753b\u4e2a\u5706  \u524d\u4e24\u4e2a\u53c2\u6570\u786e\u5b9a\u4e86\u5706\u5fc3 \uff08x,y\uff09 \u5750\u6807  \u7b2c\u4e09\u4e2a\u53c2\u6570\u662f\u5706\u7684\u534a\u5f84  \u56db\u53c2\u6570\u662f\u7ed8\u56fe\u65b9\u5411  \u9ed8\u8ba4\u662ffalse\uff0c\u5373\u987a\u65f6\u9488\n\t\t\tthis.ctx.arc(avatar_width \/ 2 + avatar_x, avatar_heigth \/ 2 + avatar_y, avatar_width \/ 2, 0, Math.PI * 2, false);\n\t\t\tthis.ctx.clip();\/\/\u753b\u597d\u4e86\u5706 \u526a\u5207  \u539f\u59cb\u753b\u5e03\u4e2d\u526a\u5207\u4efb\u610f\u5f62\u72b6\u548c\u5c3a\u5bf8\u3002\u4e00\u65e6\u526a\u5207\u4e86\u67d0\u4e2a\u533a\u57df\uff0c\u5219\u6240\u6709\u4e4b\u540e\u7684\u7ed8\u56fe\u90fd\u4f1a\u88ab\u9650\u5236\u5728\u88ab\u526a\u5207\u7684\u533a\u57df\u5185 \u8fd9\u4e5f\u662f\u6211\u4eec\u8981save\u4e0a\u4e0b\u6587\u7684\u539f\u56e0\n\t\t\tthis.ctx.drawImage(userInfo.avatar+'?t='+ new Date().getTime(), avatar_x, avatar_y, avatar_width, avatar_heigth); \/\/ \u63a8\u8fdb\u53bb\u56fe\u7247\uff0c\u5fc5\u987b\u662fhttps\u56fe\u7247\n\t\t\tthis.ctx.restore(); \/\/\u6062\u590d\u4e4b\u524d\u4fdd\u5b58\u7684\u7ed8\u56fe\u4e0a\u4e0b\u6587 \u6062\u590d\u4e4b\u524d\u4fdd\u5b58\u7684\u7ed8\u56fe\u4e0a\u4e0b\u5348\u5373\u72b6\u6001 \u8fd8\u53ef\u4ee5\u7ee7\u7eed\u7ed8\u5236\n\t\t},\n\t\tdrawPriceGroup(){\n\t\t\tlet priceItem = '';\n\t\t\tif(typeof(this.goodsItemData.pintuan_rule) == \"undefined\" ){\n\t\t\t\tpriceItem = this.goodsItemData.price;\n\t\t\t}else{\n\t\t\t\tpriceItem = this.goodsItemData.pintuan_rule.price;\n\t\t\t}\n\t\t\t\/\/ console.log('item'+priceItem);\n\t\t\t\n\t\t\tvar priceInitX = 16;\n\t\t\tvar pricePosY = 325;\n\t\t\tvar priceWidth = 16 + 11 * (priceItem.length - 1);\n\t\t\tvar lineWidth= 11 + 8 * this.goodsItemData.price.length;\n\t\t\t\/\/ \u4ef7\u683c\n\t\t\tthis.ctx.setFillStyle(\"#FE654C\");\n\t\t\tthis.ctx.setFontSize(22);\n\t\t\tthis.ctx.font = \"PingFang SC bold 22px Arial\";\n\t\t\tthis.ctx.setTextAlign(\"left\");\n\t\t\tthis.ctx.setTextBaseline(\"middle\");\n\t\t\tconst newText = `\uffe5${priceItem}`\n\t\t\tthis.drawText(this.ctx, newText, priceInitX, pricePosY, priceWidth);\n\t\t\t\/\/ console.log(newtextwidth)\n\t\t\t\/\/ \u8001\u4ef7\u683c\n\t\t\tif(this.goodsItemData.pintuan_rule.price){\n\t\t\t\tvar pricePosX = priceInitX  + priceWidth + 30; \/\/16+64\n\t\t\t\tthis.ctx.setFillStyle(\"#FE654C\");\n\t\t\t\tthis.ctx.setFontSize(14);\n\t\t\t\tthis.ctx.setTextAlign(\"left\");\n\t\t\t\tthis.ctx.setTextBaseline(\"middle\");\n\t\t\t\tthis.drawText(this.ctx, `\uffe5${this.goodsItemData.price}`, pricePosX, pricePosY, priceWidth);\n\t\t\t\t\/\/ this.ctx.fillText(`\uffe5${this.share_data.old_price}`,  pricePosX, pricePosY);\n\t\t\t\t\n\t\t\t\tthis.ctx.setFillStyle(\"#FE654C\");\n\t\t\t\t\/\/ \u6a2a\u7ebf\u7ed8\u5236\uff0c11\u5bbd\u57fa\u7840\u7cfb\u6570\uff0c8\u4e3a\u6bcf\u4e2a\u5b57\u7b26\u5bbd\u5ea6\uff0c\n\t\t\t\tthis.ctx.fillRect(pricePosX+3,pricePosY+20,lineWidth,1);\n\t\t\t\t\/\/ var ptWidth = 16 + 11 * (this.share_data.old_price - 1);\n\t\t\t\t\n\t\t\t\t\/\/ \u62fc\u56e2\u4ef7-icon\n\t\t\t\tthis.ctx.drawImage(this.ptRect+'?t='+ new Date().getTime(), pricePosX + lineWidth+10, pricePosY+13, 96 \/ 2, 33 \/ 2) \n\t\t\t}\n\t\t},\n\t\t\n\t\t\/\/ canvas\u56fe\u7247\u4fdd\u5b58\u5230\u672c\u5730\n\t\tonSaveImages() {\n\t\t\tlet me = this\n\t\t\tuni.canvasToTempFilePath({\n\t\t\t\tcanvasId: 'ShareCanvas',\n\t\t\t\tasync success(res) {\n\t\t\t\t\tconsole.log('success', res)\n\t\t\t\t\tme.tempFilePath = res.tempFilePath\n\t\t\t\t},\n\t\t\t\tfail(e) {\n\t\t\t\t\tconsole.log('fail', e)\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\t\t\n\t},\n\n}\n\n<\/code><\/pre>\n\n\n\n<p>\u597d\u4e86 \u5c31\u8fd9\u4e9b \uff0c\u6838\u5fc3\u90e8\u5206\uff1a<\/p>\n\n\n\n<p><strong>1.<\/strong>\u4f7f\u7528\u65f6\u5148\u8bf7\u6c42\u63a5\u53e3\u62ff\u5230\u63a5\u53e3\u94fe\u63a5\uff0c\u5206\u522b\u8fdb\u884c\u52a0\u8f7d\uff0c\u4e0b\u8f7d\u56fe\u7247\u5230\u672c\u5730\uff0c<\/p>\n\n\n\n<p>\u7ed8\u5236-\u901a\u8fc7\u56de\u8c03\u62c9\u8d77\u7a97\u53e3<\/p>\n\n\n\n<p>uni.showLoading({ title: &#8216;\u52a0\u8f7d\u4e2d&#8217;, mask: true });<\/p>\n\n\n\n<p> const img = new Image() <\/p>\n\n\n\n<p>img.src = userInfo.avatar; <\/p>\n\n\n\n<p>img.onload = async (res) =&gt; { <\/p>\n\n\n\n<p>await this.inCanvas() <\/p>\n\n\n\n<p>uni.hideLoading()<\/p>\n\n\n\n<p>\/\/\u62ff\u4e0d\u5230canvas\u5c55\u793a\u51fa\u6765\u56de\u8c03\u51fd\u6570\u6682\u65f6\u8fd9\u4e48\u5199<\/p>\n\n\n\n<p> this.posterState = true; }<\/p>\n\n\n\n<p><strong>2.<\/strong>\u76f4\u63a5\u7528\u7684\u56fe\u7247\uff0c\u4f1a\u8de8\u57df\uff0c\u8fd9\u91cc\u8981\u5148\u8fdb\u884c\u4e0b\u8f7d\uff0c\u628a\u56fe\u7247\u4e0b\u5230\u672c\u5730\uff1a<\/p>\n\n\n\n<p>uni.getImageInfo({ src: _this.photoPath, success(res)<\/p>\n\n\n\n<p> { \/\/\u5f00\u59cb\u7ed8\u5236 }, fail(res){ \/\/\u7ed8\u5236\u5931\u8d25 }) }<\/p>\n\n\n\n<p><strong>3.<\/strong>\u7ed8\u5236\u5b8c\u6210\u5bfc\u51fa\u4e3a\u6307\u5b9a\u5927\u5c0f\u56fe\u7247,\u628athis.tempFilePath\u63d2\u5165\u6807\u7b7e\u7684src=\u201c\u201d\u5185<\/p>\n\n\n\n<p> let me = this uni.canvasToTempFilePath({ canvasId: &#8216;shareCanvas&#8217;,<\/p>\n\n\n\n<p> async success(res) { onsole.log(&#8216;success&#8217;, res) <\/p>\n\n\n\n<p>me.tempFilePath = res.tempFilePath }, <\/p>\n\n\n\n<p>fail(e) { console.log(&#8216;fail&#8217;, e) } })<\/p>\n\n\n\n<p><strong>4.<\/strong> \u4e0e \u6709\u533a\u522b \uff0cimage\u66f4\u9884\u89c8\u7eaf\u770b\uff0cimg\u9002\u5408\u5f15\u7528,\u5728\u6d4f\u89c8\u5668\u5185\u957f\u6309\u4f1a\u5b58\u5728\u4e0d\u540c\u8868\u73b0\u65b9\u5f0f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u524d\u6bb5\u65f6\u95f4\u505a\u4e86\u4e00\u4e2aweb\u5c0f\u7a0b\u5e8f\u9879\u76ee\uff0c\u4e1a\u52a1\u4e0a\u6709\u4fdd\u5b58\u6d77\u62a5\u5e76\u5206\u4eab\u9700\u6c42\uff0c\u6240\u4ee5\u54b1\u5c31\u5f00\u59cb\u52a8\u624b\u62c6\u5206-\u5c01\u88c5\u3002 \u5148\u770b\u7236\u7ec4\u4ef6\uff1a \u770b\u5b50 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41,1],"tags":[38],"_links":{"self":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1167"}],"collection":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1167"}],"version-history":[{"count":3,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1167\/revisions"}],"predecessor-version":[{"id":1173,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/1167\/revisions\/1173"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1167"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}