{"id":34091,"date":"2024-11-25T09:16:20","date_gmt":"2024-11-25T01:16:20","guid":{"rendered":"https:\/\/fwq.ai\/blog\/34091\/"},"modified":"2024-11-25T09:16:20","modified_gmt":"2024-11-25T01:16:20","slug":"%e6%89%8b%e6%8a%8a%e6%89%8b%e5%b8%a6%e4%bd%a0%e5%9c%a8%e5%b0%8f%e7%a8%8b%e5%ba%8f%e4%b8%ad%e5%ae%9e%e7%8e%b0%e4%bf%9d%e5%ad%98%e5%9b%be%e7%89%87%e7%bb%84%e4%bb%b6%e5%8a%9f%e8%83%bd","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/34091\/","title":{"rendered":"\u624b\u628a\u624b\u5e26\u4f60\u5728\u5c0f\u7a0b\u5e8f\u4e2d\u5b9e\u73b0\u4fdd\u5b58\u56fe\u7247\u7ec4\u4ef6\u529f\u80fd"},"content":{"rendered":"<p>\u672c\u7bc7\u6587\u7ae0\u5e26\u5927\u5bb6\u804a\u804a\u4fdd\u5b58\u56fe\u7247\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u6709\u6240\u5e2e\u52a9\uff01<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/024\/6178bd1b57287498.jpg\" class=\"aligncenter\" title=\"\u624b\u628a\u624b\u5e26\u4f60\u5728\u5c0f\u7a0b\u5e8f\u4e2d\u5b9e\u73b0\u4fdd\u5b58\u56fe\u7247\u7ec4\u4ef6\u529f\u80fd\u63d2\u56fe\" alt=\"\u624b\u628a\u624b\u5e26\u4f60\u5728\u5c0f\u7a0b\u5e8f\u4e2d\u5b9e\u73b0\u4fdd\u5b58\u56fe\u7247\u7ec4\u4ef6\u529f\u80fd\u63d2\u56fe\" \/><\/p>\n<p>\u8bb8\u591a\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u901a\u8fc7\u4fdd\u5b58\u6d77\u62a5\u8ba9\u7528\u6237\u53bb\u5206\u4eab\u6d3b\u52a8\u8ba9\u66f4\u591a\u7684\u4eba\u77e5\u9053\u81ea\u5df1\u7684\u5c0f\u7a0b\u5e8f\uff0c\u60f3\u5fc5\u5728\u5e73\u65f6\u5f00\u53d1\u5c0f\u7a0b\u5e8f\u7684\u65f6\u5019\u5e94\u8be5\u6709\u9047\u89c1\u8fc7\u5427\u3002\u3010\u76f8\u5173\u5b66\u4e60\u63a8\u8350\uff1a\u3011<\/p>\n<p>\u4eca\u5929\u6211\u5c31\u6765\u5206\u4eab\u4e0b\u4e4b\u524d\u5728\u516c\u53f8\u505a\u7684\u4e00\u4e2a\u5c0f\u7a0b\u5e8f\u4fdd\u5b58\u6d77\u62a5\u7684\u529f\u80fd\u3002\u9996\u5148\u6211\u5148\u63cf\u8ff0\u4e0b\u4e4b\u524d\u5728\u516c\u53f8\u505a\u7684\u9700\u6c42\u662f\u4ec0\u4e48\u6837\u7684\u3002\u516c\u53f8\u4e0a\u7ebf\u7684\u5c0f\u7a0b\u5e8f\u4f1a\u6709\u4e00\u4e2a\u957f\u671f\u7684\u6d3b\u52a8\u76ee\u7684\u5c31\u662f\u53bb\u63a8\u5e7f\u65b0\u7528\u6237\uff0c\u6bcf\u4e2a\u7528\u6237\u90fd\u8981\u6709\u4e00\u5f20\u5c5e\u4e8e\u81ea\u5df1\u7684\u6d77\u62a5\uff0c\u901a\u8fc7\u4e2a\u4eba\u6d77\u62a5\u53bb\u63a8\u5e7f\u5219\u53ea\u662f\u5355\u7eaf\u7684\u4e00\u79cd\u65b9\u5f0f\u3002<\/p>\n<p>\u63a5\u5230\u4efb\u52a1\u540e\uff0c\u6211\u4e5f\u5148\u53bb\u4e07\u80fd\u4e92\u8054\u7f51\u505a\u4e86\u8c03\u67e5\u4f46\u662f\u6211\u7684\u5e08\u5144\u548c\u6211\u8bf4\u8fd9\u4e2a\u505a\u8fc7\u7c7b\u4f3c\u7684\u4f46\u662f\u5f53\u65f6\u53ea\u662f\u5355\u7eaf\u4e3a\u4e86\u5b8c\u6210\u4efb\u52a1\u6240\u4ee5\u4ee3\u7801\u5f88\u4e71\uff0c\u7136\u540e\u4ed6\u5c31\u4ece\u5176\u4ed6\u9879\u76ee\u7684\u4ee3\u7801\u627e\u5440\u627e\uff0c\u7136\u540e\u627e\u5230\u4e86\u7ed9\u6211~~~ \u800c\u5f53\u65f6\u7ed9\u5230\u6211\u7684\u65f6\u95f4\u7d27\u4efb\u52a1\u91cd\u5440\u53ea\u597d\u5148\u7528\u7740\u8c03\u6574\u4e00\u4e9b\u5e76\u4e14\u4ea4\u5dee\u4e86\u3002\u4e4b\u540e\u5462\u6211\u5c31\u6839\u636e\u7f51\u4e0a\u7684\u6587\u7ae0\u7136\u540e\u4e00\u6b65\u4e00\u6b65\u8e29\u5751\uff0c\u4e00\u6b65\u4e00\u6b65\u8d70\u5b9e\u73b0\u4e86\u4e00\u4e2a\u4fdd\u5b58\u6d77\u62a5\u7684\u7ec4\u4ef6\u3002<\/p>\n<h2>\u601d\u8def<\/h2>\n<blockquote><p>\n  \u9996\u5148\u58f0\u660e\u4e0b\u7ec4\u4ef6\u91c7\u7528\u7684\u662funiapp\uff0c\u5177\u4f53\u5b9e\u73b0\u4e86\u53ef\u4ee5\u7ed8\u5236\u56fe\u7247\u3001\u7ed8\u5236\u6587\u5b57\u4ee5\u53ca\u4fdd\u5b58\u6d77\u62a5\u81f3\u76f8\u518c\u7684\u57fa\u672c\u529f\u80fd\uff0c\u5728\u5f00\u53d1\u4e2d\u8fd9\u4e9b\u4e5f\u5b8c\u5168\u591f\u7528\u4e86\u3002\n<\/p><\/blockquote>\n<p>\u901a\u8fc7canvas\u7ed8\u5236\u6d77\u62a5\u3002\u901a\u8fc7uni.canvasToTempFilePath&nbsp;\u5c06\u7ed8\u5236\u597d\u7684 canvas\u8f6c\u4e3a\u56fe\u7247\u3002\u901a\u8fc7uni.saveImageToPhotosAlbum&nbsp;\u5c06\u672c\u5730\u4e34\u65f6\u8def\u5f84\u7684\u56fe\u7247\u4fdd\u5b58\u81f3\u624b\u673a\u76f8\u518c\u4e2d\u3002<strong>\u800c\u6211\u7684\u60f3\u6cd5\u662f\u5c06\u6240\u6709\u91c7\u7528\u7684\u65b9\u6cd5\u5168\u90e8\u5c01\u88c5\u5230\u7ec4\u4ef6\u4e2d\uff0c\u53ea\u901a\u8fc7\u7236\u7ec4\u4ef6\u53bb\u8c03\u7528\u9700\u8981\u4f7f\u7528\u7684\u65b9\u6cd5\u548c\u8c03\u6574\u76f8\u5173\u7684\u53c2\u6570\u5373\u53ef\u3002<\/strong> \u5177\u4f53\u4f7f\u7528\u53ef\u4ee5\u67e5\u770b\u793a\u4f8b\u4ee3\u7801<\/p>\n<h3><strong>\u901a\u8fc7canvas\u7ed8\u5236\u6d77\u62a5\u5185\u5bb9\u7684\u987a\u5e8f\u5148\u540e\u95ee\u9898<\/strong><\/h3>\n<p>\u901a\u8fc7\u4f7f\u7528promise\u5bf9\u8c61\u51b3\u5b9a\u7ed8\u5236\u6d77\u62a5\u5185\u5bb9\u7684\u987a\u5e8f\u5148\u540e\u3002promise.all()\u65b9\u6cd5\u8fdb\u884ccanvas\u6700\u540e\u4e00\u6b65\u7684\u7ed8\u753b\u64cd\u4f5c&nbsp;context.draw()<\/p>\n<h3>\u6ce8\u610funi.getImageInfo()<\/h3>\n<ul>\n<li>\n<p>\u5728\u7ed8\u5236\u56fe\u7247 \u548c \u5934\u50cf\u65f6\uff0c\u7ec4\u4ef6\u901a\u8fc7uni.getImageInfo()&nbsp;\u53bb\u83b7\u53d6\u56fe\u7247\u7684\u76f8\u5173\u4fe1\u606f\uff0c\u8c03\u7528\u8be5\u65b9\u6cd5\u6210\u529f\u7684\u524d\u63d0\u662f\u9700\u8981\u5728\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u540e\u53f0\u914d\u7f6edownload\u57df\u540d\u548crequest\u57df\u540d\u5f53\u7136\u6700\u597d\u628auploadFile\u57df\u540d\u4e5f\u4e00\u8d77\u914d\u7f6e\uff0c\u9632\u6b62\u51fa\u5dee\u9519\u3002\u4f46\u662f\u5b98\u65b9\u7ed9\u51fa\u7684\u63d0\u793a\u662f\u914d\u7f6edownload\u57df\u540d\u767d\u540d\u5355\u5373\u53ef\uff0c\u4f46\u662f\u83b7\u53d6\u4e0d\u5230\u56fe\u7247\u4fe1\u606f\uff0c\u8fd9\u7b97\u662f\u4e00\u4e2a\u5927\u5751\u4e86\u3002<\/p>\n<\/li>\n<li>\n<p>\u5982\u679c\u6ca1\u6709\u8fdb\u884c\u76f8\u5173\u914d\u7f6e\uff0c\u5728\u8c03\u8bd5\u65f6 \u6216\u8005 \u4f53\u9a8c\u7248 \u6b63\u5f0f\u7248\u7b49 \u6253\u5f00\u4e86vconsole\u8c03\u8bd5\u5de5\u5177\u3002uni.getImageInfo() \u662f\u53ef\u4ee5\u83b7\u53d6\u5230\u56fe\u7247\u4fe1\u606f\u7684\uff0c\u4e00\u65e6\u5173\u95ed\u4e86vconsole uni.getImageInfo() \u5c06\u4f1afail\uff0c \u4e5f\u662f\u4e2a\u5751\u3002<\/p>\n<\/li>\n<\/ul>\n<h2>\u672c\u7ec4\u4ef6\u65b9\u6cd5\uff0c\u53d8\u91cf\u4ecb\u7ecd<\/h2>\n<h3>props<\/h3>\n<ul>\n<li>\n<p>canvasInfo Object \uff08\u5fc5\u9700\uff09<\/p>\n<ul>\n<li>\n<p>canvasWidth \u753b\u5e03\u5bbd\u5ea6<\/p>\n<\/li>\n<li>\n<p>canvasHeight \u753b\u5e03\u9ad8\u5ea6<\/p>\n<\/li>\n<li>\n<p>canvasId \u753b\u5e03\u6807\u8bc6<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>isFullScreen Boolean<\/p>\n<ul>\n<li>\n<p>\u4e3ature\u65f6\u8868\u793a\u753b\u5e03\u4e3a\u624b\u673a\u5c4f\u5e55\u5168\u5c4f\uff0ccanvasInfo\u8bbe\u7f6e\u7684\u5bbd\u9ad8\u5c06\u5931\u6548\u3002<\/p>\n<\/li>\n<li>\n<p>\u9ed8\u8ba4\u4e3a false<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>methods<\/h3>\n<ul>\n<li>\n<p>canvasInit(callback) canvas\u521d\u59cb\u5316\uff0c\u6240\u6709\u6709\u5173\u753b\u5e03canvas\u64cd\u4f5c\u9700\u5728\u5176\u56de\u8c03\u51fd\u6570\u64cd\u4f5c\u3002<\/p>\n<\/li>\n<li>\n<p>drawCanvasImage(context, src, _imageWidth, _imageHeight, dx, dy) \u5728canvas\u7ed8\u5236\u4e00\u5f20\u56fe\u7247<\/p>\n<\/li>\n<li>\n<p>drawCircularAvatar(context, url, _circularX, _circularY, _circularR) \u5728canvas\u7ed8\u5236\u4e00\u5f20\u5706\u5f62\u56fe\u7247<\/p>\n<\/li>\n<li>\n<p>drawText(options) \u5728canvas\u7ed8\u5236\u5355\u884c\u3001\u591a\u884c\u6587\u672c<\/p>\n<\/li>\n<li>\n<p>startDrawToImage(context, promiseArr, callback) \u5c06canvas\u64cd\u4f5cdraw()\u8fdb\u884c\u7ed8\u5236<\/p>\n<\/li>\n<li>\n<p>posterToPhotosAlbum(filePath) \u4fdd\u5b58\u81f3\u624b\u673a\u76f8\u518c<\/p>\n<\/li>\n<\/ul>\n<h2>\u793a\u4f8b\u4ee3\u7801<\/h2>\n<pre>&lt;template&gt;&lt;view&gt;&lt;view&gt;&lt;image&gt;&lt;\/image&gt;&lt;save-poster-com&gt;&lt;\/save-poster-com&gt;&lt;\/view&gt;&lt;button&gt;\u4fdd\u5b58\u6d77\u62a5&lt;\/button&gt;\n\t&lt;\/view&gt;&lt;\/template&gt;&lt;script&gt;\n\timport SavePosterCom from &#039;@\/components\/SavePosterCom\/SavePosterCom.vue&#039;\n\texport default {\n\t\tcomponents: {\n\t\t\tSavePosterCom\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tcanvasInfo: {\n\t\t\t\t\tcanvasWidth: 620,\n\t\t\t\t\tcanvasHeight: 950,\n\t\t\t\t\tcanvasId: &#039;save-poster&#039;\n\t\t\t\t},\n\t\t\t\ttempFilePath: &#039;&#039;,\n\t\t\t\tcanvasBgUrl: &#039;https:\/\/images.pexels.com\/photos\/4065617\/pexels-photo-4065617.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500&#039;,\n\t\t\t\tavatarUrl: &#039;https:\/\/p9-passport.byteacctimg.com\/img\/user-avatar\/4dbf31fa6dec9c65b78a70d28d843c04~300x300.image&#039;\n\t\t\t}\n\t\t},\n\t\tonLoad() {\n\t\t\tlet {\n\t\t\t\tdrawCanvasImage,\n\t\t\t\tdrawCircularAvatar,\n\t\t\t\tdrawText\n\t\t\t} = this.$refs.savePoster.$options.methods\n\t\t\tthis.$refs.savePoster.canvasInit(({\n\t\t\t\tcontext,\n\t\t\t\tcomThis\n\t\t\t}) =&gt; {\n\t\t\t\t\/\/ \u83b7\u53d6\u753b\u5e03\u5bbd\u9ad8\n\t\t\t\tlet canvasWH = comThis.canvasWH\n\t\t\t\t\/\/ \u7ed8\u5236\u6d77\u62a5\u80cc\u666f\u56fe\n\t\t\t\tlet promise_1 = drawCanvasImage(context, this.canvasBgUrl, canvasWH.canvasWidth, canvasWH.canvasHeight)\n\t\t\t\t\/\/ \u5fc5\u987b\u5148\u7ed8\u5236\u73a9\u6d77\u62a5\u80cc\u666f\u56fe \u518d\u53bb\u64cd\u4f5c\u5176\u4ed6\u7ed8\u5236\u5185\u5bb9\n\t\t\t\tpromise_1.then(res =&gt; {\n\t\t\t\t\tlet promise_2 = drawCircularAvatar(context, this.avatarUrl, canvasWH.canvasWidth \/ 2, canvasWH.canvasHeight \/\n\t\t\t\t\t\t7, 70)\n\t\t\t\t\t\n\t\t\t\t\tlet promise_3 = drawText({\n\t\t\t\t\t\tcontext: context,\n\t\t\t\t\t\ttext: &#039;\u76ae\u76ae\u867e\u4ec1&#039;,\n\t\t\t\t\t\tdx: (canvasWH.canvasWidth \/ 2) + 60,\n\t\t\t\t\t\tdy: canvasWH.canvasHeight \/ 4,\n\t\t\t\t\t\tfontSize: 30,\n\t\t\t\t\t\tfontColor: &#039;#5D4037&#039;\n\t\t\t\t\t})\n\t\t\t\t\t\n\t\t\t\t\tlet promise_4 = drawCanvasImage(context, this.avatarUrl, 150, 150, (canvasWH.canvasWidth \/ 2) + 85, (canvasWH.canvasHeight -\n\t\t\t\t\t\t165))\n\t\t\t\t\t \n\t\t\t\t\tthis.$refs.savePoster.startDrawToImage(context, [promise_1,promise_2,promise_4], (tempFilePath) =&gt; {\n\t\t\t\t\t\tthis.tempFilePath = tempFilePath\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t})\n\t\t},\n\t\tmethods: {\n\t\t\tsaveBtnFun() {\n\t\t\t\tuni.showModal({\n\t\t\t\t\ttitle: &#039;\u4fdd\u5b58\u6d77\u62a5&#039;,\n\t\t\t\t\tcontent: &#039;\u6d77\u62a5\u5c06\u88ab\u4fdd\u5b58\u81f3\u76f8\u518c\u4e2d&#039;,\n\t\t\t\t\tconfirmText: &#039;\u4fdd\u5b58&#039;,\n\t\t\t\t\tsuccess: (res) =&gt; {\n\t\t\t\t\t\tif(res.confirm) {\n\t\t\t\t\t\t\tthis.$refs.savePoster.posterToPhotosAlbum(this.tempFilePath)\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\t}\n&lt;\/script&gt;&lt;style&gt;\n\t.savePosterItem {\n\t\ttext-align: center;\n\t}\n\t.savePosterItem &gt; image {\n\t\twidth: 620rpx;\n\t\theight: 950rpx;\n\t}\n\t\n\t.savePosterBtn {\n\t\tmargin-top: 40rpx;\n\t\twidth: 80%;\n\t}\n&lt;\/style&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<h2>\u7ec4\u4ef6\u6e90\u7801<\/h2>\n<pre>&lt;template&gt;&lt;view&gt;&lt;canvas&gt;&lt;\/canvas&gt;&lt;\/view&gt;&lt;\/template&gt;&lt;script&gt;\n\texport default {\n\t\tname: &#039;savePosterCom&#039;,\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tuserPhoneWHInfo: {},\n\t\t\t\tcanvasWH: {\n\t\t\t\t\tcanvasWidth: 0,\n\t\t\t\t\tcanvasHeight: 0\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tprops: {\n\t\t\t\/\/ \u51b3\u5b9a\u4fdd\u5b58\u4e0b\u6765\u7684\u56fe\u7247\u7684\u5bbd\u9ad8\n\t\t\tcanvasInfo: {\n\t\t\t\ttype: Object,\n\t\t\t\tdefault: () =&gt; {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tcanvasWidth: 0,\n\t\t\t\t\t\tcanvasHeight: 0,\n\t\t\t\t\t\tcanvasId: &#039;canvasId&#039;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\t\/\/ canvas\u753b\u5e03\u662f\u4e0d\u662f\u5168\u5c4f\uff0c\u9ed8\u8ba4\u662ffalse\u3002 false\u65f6\u4f7f\u7528\u5fc5\u987b\u4f20 canvasInfo\n\t\t\tisFullScreen: Boolean\n\t\t},\n\t\tcreated() {\n\t\t\tthis.userPhoneWHInfo = this.getPhoneSystemInfo()\n\t\t\tif (this.isFullScreen) { \/\/ \u753b\u5e03\u5168\u5c4f\n\t\t\t\tthis.canvasWH.canvasWidth = this.userPhoneWHInfo.windowWidth\n\t\t\t\tthis.canvasWH.canvasHeight = this.userPhoneWHInfo.windowHeight\n\t\t\t} else { \/\/ \u6307\u5b9a\u5bbd\u9ad8\n\t\t\t\tthis.canvasWH.canvasWidth = this.canvasInfo.canvasWidth\n\t\t\t\tthis.canvasWH.canvasHeight = this.canvasInfo.canvasHeight\n\t\t\t}\n\t\t},\n\t\tmounted() {},\n\t\tmethods: {\n\t\t\t\/**\n\t\t\t* \u83b7\u53d6\u7528\u6237\u624b\u673a\u5c4f\u5e55\u4fe1\u606f\n\t\t\t*\/\n\t\t\tgetPhoneSystemInfo() {\n\t\t\t\tconst res = uni.getSystemInfoSync();\n\t\t\t\treturn {\n\t\t\t\t\twindowWidth: res.windowWidth,\n\t\t\t\t\twindowHeight: res.windowHeight\n\t\t\t\t}\n\t\t\t},\n\t\t\t\/** \u83b7\u53d6 CanvasContext\u5b9e\u4f8b\n\t\t\t* @param {String} canvasId \n\t\t\t*\/\n\t\t\tgetCanvasContextInit(canvasId) {\n\t\t\t\treturn uni.createCanvasContext(canvasId, this)\n\t\t\t},\n\t\t\t\/** \u4fdd\u5b58\u6d77\u62a5\u7ec4\u4ef6\u521d\u59cb\u5316\n\t\t\t* @param {Function} callback(context) \u56de\u8c03\u51fd\u6570\n\t\t\t*\/\n\t\t\tcanvasInit(callback) {\n\t\t\t\tlet context = this.getCanvasContextInit(this.canvasInfo.canvasId)\n\t\t\t\tif (context) {\n\t\t\t\t\tcallback({\n\t\t\t\t\t\tcontext: context,\n\t\t\t\t\t\tcomThis: this\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t},\n\t\t\t\/** \u5c06\u4e0a\u8bc9\u7684\u7ed8\u5236\u753b\u5230\u753b\u5e03\u4e2d \u5e76\u4e14 \u5c06\u753b\u5e03\u5bfc\u51fa\u4e3a\u56fe\u7247\n\t\t\t*  @param context \u753b\u5e03\n\t\t\t*  @param {Promise[]} \u5b58\u653ePromise\u7684\u6570\u7ec4 \n\t\t\t*  @param {Function} callback \u4fdd\u5b58\u56fe\u7247\u540e\u6267\u884c\u7684\u56de\u8c03\u51fd\u6570(\u672c\u5730\u56fe\u7247\u4e34\u65f6\u8def\u5f84)\n\t\t\t*\/\n\t\t\tstartDrawToImage(context, promiseArr, callback) {\n\t\t\t\t\/\/ \u5c06\u4e4b\u524d\u5728\u7ed8\u56fe\u4e0a\u4e0b\u6587\u4e2d\u7684\u63cf\u8ff0\uff08\u8def\u5f84\u3001\u53d8\u5f62\u3001\u6837\u5f0f\uff09\u753b\u5230 canvas \u4e2d\n\t\t\t\tlet canvasId = this.canvasInfo.canvasId\n\t\t\t\tlet tempFilePath = &#039;&#039;\n\t\t\t\tPromise.all(promiseArr).then(res =&gt; {\n\t\t\t\t\tcontext.draw(false, async () =&gt; {\n\t\t\t\t\t\tcallback(await this.canvasToImage(canvasId))\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t},\n\t\t\t\/**\n\t\t\t* \u5728canvas\u7ed8\u5236\u4e00\u5f20\u56fe\u7247\n\t\t\t* @param context \u753b\u5e03\n\t\t\t* @param src \u56fe\u7247\u8d44\u6e90\n\t\t\t* @param _imageWidth \u56fe\u7247\u5bbd\u5ea6\n\t\t\t* @param _imageHeight \u56fe\u7247\u9ad8\u5ea6 \n\t\t\t*\/\n\t\t\tdrawCanvasImage(context, src, _imageWidth, _imageHeight, dx, dy) {\n\t\t\t\treturn new Promise((resolve, reject) =&gt; {\n\t\t\t\t\tuni.getImageInfo({\n\t\t\t\t\t\tsrc: src,\n\t\t\t\t\t\tsuccess: res =&gt; {\n\t\t\t\t\t\t\tcontext.drawImage(res.path, (dx - _imageWidth), (dy - _imageHeight), _imageWidth, _imageHeight)\n\t\t\t\t\t\t\tresolve(context)\n\t\t\t\t\t\t},\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t},\n\t\t\t\/** \u7ed8\u5236\u4e00\u4e2a\u5706\u5f62\u5934\u50cf\n\t\t\t* @param  context \u753b\u5e03 \n\t\t\t* @param  url     \u56fe\u7247\u5730\u5740\n\t\t\t* @param  _circularX  \u5706\u5fc3X\u5750\u6807\n\t\t\t* @param  _circularY  \u5706\u5fc3Y\u5750\u6807\n\t\t\t* @param  _circularR  \u5706\u534a\u5f84\n\t\t\t*\/\n\t\t\tdrawCircularAvatar(context, url, _circularX, _circularY, _circularR) {\n\t\t\t\tlet dx = _circularX - _circularR;\n\t\t\t\tlet dy = _circularY - _circularR;\n\t\t\t\tlet dwidth = _circularR * 2;\n\t\t\t\tlet dheight = _circularR * 2\n\t\t\t\treturn new Promise((resolve, reject) =&gt; {\n\t\t\t\t\tuni.downloadFile({\n\t\t\t\t\t\turl: url,\n\t\t\t\t\t\tsuccess: res =&gt; {\n\t\t\t\t\t\t\tcontext.save()\n\t\t\t\t\t\t\tcontext.beginPath()\n\t\t\t\t\t\t\t\/\/ _circularX\u5706\u7684x\u5750\u6807  _circularY\u5706\u7684y\u5750\u6807  _circularR\u5706\u7684\u534a\u5f84\n\t\t\t\t\t\t\tcontext.arc(_circularX, _circularY, _circularR, 0, 2 * Math.PI)\n\t\t\t\t\t\t\tcontext.clip()\n\t\t\t\t\t\t\t\/\/ dx: \u56fe\u50cf\u7684\u5de6\u4e0a\u89d2\u5728\u76ee\u6807canvas\u4e0a X \u8f74\u7684\u4f4d\u7f6e\n\t\t\t\t\t\t\t\/\/ dy: \u56fe\u50cf\u7684\u5de6\u4e0a\u89d2\u5728\u76ee\u6807canvas\u4e0a Y \u8f74\u7684\u4f4d\u7f6e\n\t\t\t\t\t\t\t\/\/ dwidth: \u5728\u76ee\u6807\u753b\u5e03\u4e0a\u7ed8\u5236\u56fe\u50cf\u7684\u5bbd\u5ea6\uff0c\u5141\u8bb8\u5bf9\u7ed8\u5236\u7684\u56fe\u50cf\u8fdb\u884c\u7f29\u653e\n\t\t\t\t\t\t\t\/\/ dheight: \u5728\u76ee\u6807\u753b\u5e03\u4e0a\u7ed8\u5236\u56fe\u50cf\u7684\u9ad8\u5ea6\uff0c\u5141\u8bb8\u5bf9\u7ed8\u5236\u7684\u56fe\u50cf\u8fdb\u884c\u7f29\u653e\n\t\t\t\t\t\t\tcontext.drawImage(res.tempFilePath, dx, dy, dwidth, dheight)\n\t\t\t\t\t\t\tcontext.restore()\n\t\t\t\t\t\t\t\/\/ context.draw()\n\t\t\t\t\t\t\tresolve(context)\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t})\n\t\t\t},\n\t\t\t\/** \u7ed8\u5236\u591a\u884c\u6587\u672c \u6ce8:, \u548c \u7a7a\u683c\u90fd\u7b97\u4e00\u4e2a\u5b57\n\t\t\t* @param context \u753b\u5e03\n\t\t\t* @param text \u9700\u8981\u88ab\u7ed8\u5236\u7684\u6587\u672c\n\t\t\t* @param dx \u5de6\u4e0a\u89d2x\u5750\u6807\n\t\t\t* @param dy \u53f3\u4e0a\u89d2y\u5750\u6807\n\t\t\t* @param rowStrnum \u6bcf\u884c\u591a\u5c11\u4e2a\u5b57 (\u9ed8\u8ba4\u4e3atext\u5b57\u4f53\u4e2a\u6570-&gt;\u5355\u884c)\n\t\t\t* @param fontSize \u6587\u5b57\u5927\u5c0f \uff08\u9ed8\u8ba416\uff09\n\t\t\t* @param fontColor \u6587\u5b57\u989c\u8272 (\u9ed8\u8ba4black)\n\t\t\t* @param lineHeight \u5355\u884c\u6587\u672c\u884c\u9ad8 (\u9ed8\u8ba40)\n\t\t\t*\/\n\t\t\tdrawText(options) {\n\t\t\t\tlet {\n\t\t\t\t\tcontext,\n\t\t\t\t\ttext,\n\t\t\t\t\tdx,\n\t\t\t\t\tdy,\n\t\t\t\t\trowStrnum = text.length,\n\t\t\t\t\tlineHeight = 0,\n\t\t\t\t\tfontSize = 16,\n\t\t\t\t\tfontColor = &#039;black&#039;\n\t\t\t\t} = options\n\t\t\t\treturn new Promise((resolve, reject) =&gt; {\n\t\t\t\t\tcontext.setFontSize(fontSize)\n\t\t\t\t\tcontext.setFillStyle(fontColor)\n\t\t\t\t\tcontext.setTextBaseline(&#039;middle&#039;)\n\t\t\t\t\t\/\/ \u83b7\u53d6\u9700\u8981\u7ed8\u5236\u7684\u6587\u672c\u5bbd\u5ea6\n\t\t\t\t\tlet textWidth = Number(context.measureText(text).width)\n\t\t\t\t\t\/\/ console.log(&#039;textWidth&#039;,textWidth)\n\t\t\t\t\t\/\/ \u83b7\u53d6\u6587\u672c\u7684\u5b57\u6570 \n\t\t\t\t\tlet textNum = text.length\n\t\t\t\t\t\/\/ \u83b7\u53d6\u884c\u6570 \u5411\u4e0a\u53d6\u6574\n\t\t\t\t\tlet lineNum = Math.ceil(textNum \/ rowStrnum)\n\t\t\t\t\t\/\/ console.log(&#039;textNum&#039;,textNum)\n\t\t\t\t\t\/\/ console.log(&#039;lineNum&#039;,lineNum)\n\t\t\t\t\tfor (let i = 0; i &lt; lineNum; i++) {\n\t\t\t\t\t\tlet sliceText = text.slice(i * rowStrnum, (i + 1) * rowStrnum)\n\t\t\t\t\t\t\/\/ fillText \u7684 dx = \u6587\u5b57\u6700\u5de6\u8fb9\u7684\u8ddd\u79bb\u5230\u5c4f\u5e55\u653f\u7b56\u7684\u8ddd\u79bb\n\t\t\t\t\t\tcontext.fillText(sliceText, dx - textWidth, dy + i * lineHeight);\n\t\t\t\t\t}\n\t\t\t\t\tresolve(context)\n\t\t\t\t})\n\t\t\t},\n\t\t\t\/** \u5c06\u753b\u5e03\u5bfc\u51fa\u4e3a\u56fe\u7247\n\t\t\t* @param canvasId \u753b\u5e03\u6807\u8bc6\n\t\t\t*\/\n\t\t\tcanvasToImage(canvasId) {\n\t\t\t\treturn new Promise((resolve, reject) =&gt; {\n\t\t\t\t\tuni.canvasToTempFilePath({\n\t\t\t\t\t\tcanvasId: canvasId, \/\/ \u753b\u5e03\u6807\u8bc6\n\t\t\t\t\t\tsuccess: res =&gt; {\n\t\t\t\t\t\t\t\/\/ \u5728H5\u5e73\u53f0\u4e0b\uff0ctempFilePath \u4e3a base64\n\t\t\t\t\t\t\tresolve(res.tempFilePath)\n\t\t\t\t\t\t},\n\t\t\t\t\t\tfail: err =&gt; {\n\t\t\t\t\t\t\tconsole.log(&#039;err&#039;, err)\n\t\t\t\t\t\t\treject(err)\n\t\t\t\t\t\t}\n\t\t\t\t\t}, this)\n\t\t\t\t})\n\t\t\t},\n\t\t\t\/** \u4fdd\u5b58\u751f\u6210\u7684\u56fe\u7247\u5230\u672c\u5730\u76f8\u518c\u4e2d\n\t\t\t*  @param {String} filePath \u56fe\u7247\u4e34\u65f6\u8def\u52b2\n\t\t\t*\/\n\t\t\tposterToPhotosAlbum(filePath) {\n\t\t\t\tconsole.log(&#039;filePath&#039;,filePath)\n\t\t\t\tuni.showLoading({\n\t\t\t\t\ttitle: &#039;\u4fdd\u5b58\u4e2d...&#039;\n\t\t\t\t})\n\t\t\t\tuni.saveImageToPhotosAlbum({\n\t\t\t\t\tfilePath: filePath,\n\t\t\t\t\tsuccess: (res) =&gt; {\n\t\t\t\t\t\tuni.showToast({\n\t\t\t\t\t\t\ttitle: &#039;\u4fdd\u5b58\u6210\u529f\uff0c\u8bf7\u524d\u5f80\u624b\u673a\u76f8\u518c\u4e2d\u67e5\u770b&#039;,\n\t\t\t\t\t\t\tmask: true,\n\t\t\t\t\t\t\ticon: &#039;none&#039;,\n\t\t\t\t\t\t\tduration: 2000\n\t\t\t\t\t\t})\n\t\t\t\t\t},\n\t\t\t\t\tfail: (err) =&gt; {\n\t\t\t\t\t\tconsole.log(&#039;err&#039;,err)\n\t\t\t\t\t\tif (err.errMsg.includes(&#039;deny&#039;)||err.errMsg.includes(&#039;denied&#039;)) { \/\/ \u7528\u6237\u9009\u62e9\u62d2\u7edd \n\t\t\t\t\t\t\tthis.openSetting()\n\t\t\t\t\t\t} else if (err.errMsg.includes(&#039;fail cancel&#039;)) { \/\/ \u7528\u6237\u5728\u4fdd\u5b58\u56fe\u7247\u65f6 \u53d6\u6d88\u4e86\n\t\t\t\t\t\t\tuni.showToast({\n\t\t\t\t\t\t\t\ttitle: &#039;\u5df2\u53d6\u6d88\u4fdd\u5b58\uff0c\u65e0\u6cd5\u4fdd\u5b58\u81f3\u76f8\u518c&#039;,\n\t\t\t\t\t\t\t\tmask: true,\n\t\t\t\t\t\t\t\ticon: &#039;none&#039;,\n\t\t\t\t\t\t\t\tduration: 2000\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\tcomplete: () =&gt; {\n\t\t\t\t\t\tuni.hideLoading()\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t},\n\t\t\t\/**\n\t\t\t* \u6253\u5f00\u6444\u50cf\u5934\u8bbe\u7f6e\u6743\u9650\u9875\u9762\n\t\t\t*\/\n\t\t\topenSetting() {\n\t\t\t\tuni.showModal({\n\t\t\t\t\ttitle: &#039;\u6e29\u99a8\u63d0\u793a&#039;,\n\t\t\t\t\tcontent: &#039;\u4fdd\u5b58\u56fe\u7247\u81f3\u76f8\u518c\u4e2d\uff0c\u9700\u8981\u60a8\u540c\u610f\u6dfb\u52a0\u8bbf\u95ee\u76f8\u518c\u6743\u9650&#039;,\n\t\t\t\t\tcancelText: &#039;\u62d2\u7edd&#039;,\n\t\t\t\t\tconfirmText: &#039;\u540c\u610f&#039;,\n\t\t\t\t\tsuccess: res =&gt; {\n\t\t\t\t\t\tif (res.confirm) {\n\t\t\t\t\t\t\tuni.openSetting({\n\t\t\t\t\t\t\t\tsuccess: settingdata =&gt; {\n\t\t\t\t\t\t\t\t\tif (settingdata.authSetting[&#039;scope.writePhotosAlbum&#039;]) {\n\t\t\t\t\t\t\t\t\t\tconsole.log(&#039;\u83b7\u53d6\u6743\u9650\u6210\u529f\uff0c\u7ed9\u51fa\u518d\u6b21\u70b9\u51fb\u56fe\u7247\u4fdd\u5b58\u5230\u76f8\u518c\u7684\u63d0\u793a\u3002&#039;)\n\t\t\t\t\t\t\t\t\t\tuni.showToast({\n\t\t\t\t\t\t\t\t\t\t\ttitle: &#039;\u6388\u6743\u6210\u529f\uff0c\u8bf7\u518d\u6b21\u70b9\u51fb\u4fdd\u5b58&#039;,\n\t\t\t\t\t\t\t\t\t\t\ticon: &#039;none&#039;,\n\t\t\t\t\t\t\t\t\t\t\tduration: 2000,\n\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tconsole.log(&#039;\u83b7\u53d6\u6743\u9650\u5931\u8d25\uff0c\u7ed9\u51fa\u4e0d\u7ed9\u6743\u9650\u5c31\u65e0\u6cd5\u6b63\u5e38\u4f7f\u7528\u7684\u63d0\u793a&#039;)\n\t\t\t\t\t\t\t\t\t\tuni.showToast({\n\t\t\t\t\t\t\t\t\t\t\ttitle: &#039;\u9700\u8981\u8bbf\u95ee\u76f8\u518c\u6743\u9650&#039;,\n\t\t\t\t\t\t\t\t\t\t\ticon: &#039;none&#039;,\n\t\t\t\t\t\t\t\t\t\t\tduration: 2000,\n\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tfail: (res) =&gt; {\n\t\t\t\t\t\t\t\t\tconsole.log(&#039;err&#039;, err)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tuni.showToast({\n\t\t\t\t\t\t\t\ttitle: &#039;\u5df2\u62d2\u7edd\u6388\u6743\uff0c\u65e0\u6cd5\u4fdd\u5b58\u81f3\u76f8\u518c&#039;,\n\t\t\t\t\t\t\t\tmask: true,\n\t\t\t\t\t\t\t\ticon: &#039;none&#039;,\n\t\t\t\t\t\t\t\tduration: 2000\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\t}\n&lt;\/script&gt;&lt;style&gt;\n&lt;\/style&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<h2>\u6548\u679c<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/p1-juejin.byteimg.com\/tos-cn-i-k3u1fbpfcp\/90ebb966300549e39a89ca643682b46a~tplv-k3u1fbpfcp-watermark.awebp?\" class=\"aligncenter\" title=\"\u624b\u628a\u624b\u5e26\u4f60\u5728\u5c0f\u7a0b\u5e8f\u4e2d\u5b9e\u73b0\u4fdd\u5b58\u56fe\u7247\u7ec4\u4ef6\u529f\u80fd\u63d2\u56fe1\" alt=\"\u624b\u628a\u624b\u5e26\u4f60\u5728\u5c0f\u7a0b\u5e8f\u4e2d\u5b9e\u73b0\u4fdd\u5b58\u56fe\u7247\u7ec4\u4ef6\u529f\u80fd\u63d2\u56fe1\" \/><\/p>\n<p>\u66f4\u591a\u7f16\u7a0b\u76f8\u5173\u77e5\u8bc6\uff0c\u8bf7\u8bbf\u95ee\uff1a\uff01\uff01<\/p>\n<p>\u4ee5\u4e0a\u5c31\u662f\u624b\u628a\u624b\u5e26\u4f60\u5728\u5c0f\u7a0b\u5e8f\u4e2d\u5b9e\u73b0\u4fdd\u5b58\u56fe\u7247\u7ec4\u4ef6\u529f\u80fd\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u7bc7\u6587\u7ae0\u5e26\u5927\u5bb6\u804a\u804a\u4fdd\u5b58\u56fe\u7247\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u6709\u6240\u5e2e\u52a9\uff01 \u8bb8\u591a\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u901a\u8fc7\u4fdd\u5b58\u6d77\u62a5\u8ba9\u7528\u6237\u53bb\u5206\u4eab\u6d3b\u52a8\u8ba9\u66f4\u591a\u7684\u4eba\u77e5\u9053\u81ea\u5df1\u7684\u5c0f\u7a0b\u5e8f\uff0c\u60f3\u5fc5\u5728\u5e73\u65f6\u5f00\u53d1\u5c0f\u7a0b\u5e8f\u7684\u65f6\u5019\u5e94\u8be5\u6709\u9047\u89c1\u8fc7\u5427\u3002\u3010\u76f8\u5173\u5b66\u4e60\u63a8\u8350\uff1a\u3011 \u4eca\u5929\u6211\u5c31\u6765\u5206\u4eab\u4e0b\u4e4b\u524d\u5728\u516c\u53f8\u505a\u7684\u4e00\u4e2a\u5c0f\u7a0b\u5e8f\u4fdd\u5b58\u6d77\u62a5\u7684\u529f\u80fd\u3002\u9996\u5148\u6211\u5148\u63cf\u8ff0\u4e0b\u4e4b\u524d\u5728\u516c\u53f8\u505a\u7684\u9700\u6c42\u662f\u4ec0\u4e48\u6837\u7684\u3002\u516c\u53f8\u4e0a\u7ebf\u7684\u5c0f\u7a0b\u5e8f\u4f1a\u6709\u4e00\u4e2a\u957f\u671f\u7684\u6d3b\u52a8\u76ee\u7684\u5c31\u662f\u53bb\u63a8\u5e7f\u65b0\u7528\u6237\uff0c\u6bcf\u4e2a\u7528\u6237\u90fd\u8981\u6709\u4e00\u5f20\u5c5e\u4e8e\u81ea\u5df1\u7684\u6d77\u62a5\uff0c\u901a\u8fc7\u4e2a\u4eba\u6d77\u62a5\u53bb\u63a8\u5e7f\u5219\u53ea\u662f\u5355\u7eaf\u7684\u4e00\u79cd\u65b9\u5f0f\u3002 \u63a5\u5230\u4efb\u52a1\u540e\uff0c\u6211\u4e5f\u5148\u53bb\u4e07\u80fd\u4e92\u8054\u7f51\u505a\u4e86\u8c03\u67e5\u4f46\u662f\u6211\u7684\u5e08\u5144\u548c\u6211\u8bf4\u8fd9\u4e2a\u505a\u8fc7\u7c7b\u4f3c\u7684\u4f46\u662f\u5f53\u65f6\u53ea\u662f\u5355\u7eaf\u4e3a\u4e86\u5b8c\u6210\u4efb\u52a1\u6240\u4ee5\u4ee3\u7801\u5f88\u4e71\uff0c\u7136\u540e\u4ed6\u5c31\u4ece\u5176\u4ed6\u9879\u76ee\u7684\u4ee3\u7801\u627e\u5440\u627e\uff0c\u7136\u540e\u627e\u5230\u4e86\u7ed9\u6211~~~ \u800c\u5f53\u65f6\u7ed9\u5230\u6211\u7684\u65f6\u95f4\u7d27\u4efb\u52a1\u91cd\u5440\u53ea\u597d\u5148\u7528\u7740\u8c03\u6574\u4e00\u4e9b\u5e76\u4e14\u4ea4\u5dee\u4e86\u3002\u4e4b\u540e\u5462\u6211\u5c31\u6839\u636e\u7f51\u4e0a\u7684\u6587\u7ae0\u7136\u540e\u4e00\u6b65\u4e00\u6b65\u8e29\u5751\uff0c\u4e00\u6b65\u4e00\u6b65\u8d70\u5b9e\u73b0\u4e86\u4e00\u4e2a\u4fdd\u5b58\u6d77\u62a5\u7684\u7ec4\u4ef6\u3002 \u601d\u8def \u9996\u5148\u58f0\u660e\u4e0b\u7ec4\u4ef6\u91c7\u7528\u7684\u662funiapp\uff0c\u5177\u4f53\u5b9e\u73b0\u4e86\u53ef\u4ee5\u7ed8\u5236\u56fe\u7247\u3001\u7ed8\u5236\u6587\u5b57\u4ee5\u53ca\u4fdd\u5b58\u6d77\u62a5\u81f3\u76f8\u518c\u7684\u57fa\u672c\u529f\u80fd\uff0c\u5728\u5f00\u53d1\u4e2d\u8fd9\u4e9b\u4e5f\u5b8c\u5168\u591f\u7528\u4e86\u3002 \u901a\u8fc7canvas\u7ed8\u5236\u6d77\u62a5\u3002\u901a\u8fc7uni.canvasToTempFilePath&nbsp;\u5c06\u7ed8\u5236\u597d\u7684 canvas\u8f6c\u4e3a\u56fe\u7247\u3002\u901a\u8fc7uni.saveImageToPhotosAlbum&nbsp;\u5c06\u672c\u5730\u4e34\u65f6\u8def\u5f84\u7684\u56fe\u7247\u4fdd\u5b58\u81f3\u624b\u673a\u76f8\u518c\u4e2d\u3002\u800c\u6211\u7684\u60f3\u6cd5\u662f\u5c06\u6240\u6709\u91c7\u7528\u7684\u65b9\u6cd5\u5168\u90e8\u5c01\u88c5\u5230\u7ec4\u4ef6\u4e2d\uff0c\u53ea\u901a\u8fc7\u7236\u7ec4\u4ef6\u53bb\u8c03\u7528\u9700\u8981\u4f7f\u7528\u7684\u65b9\u6cd5\u548c\u8c03\u6574\u76f8\u5173\u7684\u53c2\u6570\u5373\u53ef\u3002 \u5177\u4f53\u4f7f\u7528\u53ef\u4ee5\u67e5\u770b\u793a\u4f8b\u4ee3\u7801 \u901a\u8fc7canvas\u7ed8\u5236\u6d77\u62a5\u5185\u5bb9\u7684\u987a\u5e8f\u5148\u540e\u95ee\u9898 \u901a\u8fc7\u4f7f\u7528promise\u5bf9\u8c61\u51b3\u5b9a\u7ed8\u5236\u6d77\u62a5\u5185\u5bb9\u7684\u987a\u5e8f\u5148\u540e\u3002promise.all()\u65b9\u6cd5\u8fdb\u884ccanvas\u6700\u540e\u4e00\u6b65\u7684\u7ed8\u753b\u64cd\u4f5c&nbsp;context.draw() \u6ce8\u610funi.getImageInfo() \u5728\u7ed8\u5236\u56fe\u7247 \u548c \u5934\u50cf\u65f6\uff0c\u7ec4\u4ef6\u901a\u8fc7uni.getImageInfo()&nbsp;\u53bb\u83b7\u53d6\u56fe\u7247\u7684\u76f8\u5173\u4fe1\u606f\uff0c\u8c03\u7528\u8be5\u65b9\u6cd5\u6210\u529f\u7684\u524d\u63d0\u662f\u9700\u8981\u5728\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u540e\u53f0\u914d\u7f6edownload\u57df\u540d\u548crequest\u57df\u540d\u5f53\u7136\u6700\u597d\u628auploadFile\u57df\u540d\u4e5f\u4e00\u8d77\u914d\u7f6e\uff0c\u9632\u6b62\u51fa\u5dee\u9519\u3002\u4f46\u662f\u5b98\u65b9\u7ed9\u51fa\u7684\u63d0\u793a\u662f\u914d\u7f6edownload\u57df\u540d\u767d\u540d\u5355\u5373\u53ef\uff0c\u4f46\u662f\u83b7\u53d6\u4e0d\u5230\u56fe\u7247\u4fe1\u606f\uff0c\u8fd9\u7b97\u662f\u4e00\u4e2a\u5927\u5751\u4e86\u3002 \u5982\u679c\u6ca1\u6709\u8fdb\u884c\u76f8\u5173\u914d\u7f6e\uff0c\u5728\u8c03\u8bd5\u65f6 \u6216\u8005 \u4f53\u9a8c\u7248 \u6b63\u5f0f\u7248\u7b49 \u6253\u5f00\u4e86vconsole\u8c03\u8bd5\u5de5\u5177\u3002uni.getImageInfo() \u662f\u53ef\u4ee5\u83b7\u53d6\u5230\u56fe\u7247\u4fe1\u606f\u7684\uff0c\u4e00\u65e6\u5173\u95ed\u4e86vconsole uni.getImageInfo() \u5c06\u4f1afail\uff0c \u4e5f\u662f\u4e2a\u5751\u3002 \u672c\u7ec4\u4ef6\u65b9\u6cd5\uff0c\u53d8\u91cf\u4ecb\u7ecd props canvasInfo Object \uff08\u5fc5\u9700\uff09 canvasWidth \u753b\u5e03\u5bbd\u5ea6 canvasHeight \u753b\u5e03\u9ad8\u5ea6 canvasId \u753b\u5e03\u6807\u8bc6 isFullScreen Boolean \u4e3ature\u65f6\u8868\u793a\u753b\u5e03\u4e3a\u624b\u673a\u5c4f\u5e55\u5168\u5c4f\uff0ccanvasInfo\u8bbe\u7f6e\u7684\u5bbd\u9ad8\u5c06\u5931\u6548\u3002 \u9ed8\u8ba4\u4e3a false methods canvasInit(callback) canvas\u521d\u59cb\u5316\uff0c\u6240\u6709\u6709\u5173\u753b\u5e03canvas\u64cd\u4f5c\u9700\u5728\u5176\u56de\u8c03\u51fd\u6570\u64cd\u4f5c\u3002 drawCanvasImage(context, src, _imageWidth, _imageHeight, dx, dy) \u5728canvas\u7ed8\u5236\u4e00\u5f20\u56fe\u7247 drawCircularAvatar(context, url, _circularX, _circularY, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-34091","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/34091","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=34091"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/34091\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=34091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=34091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=34091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}