{"id":515,"date":"2019-07-27T14:02:26","date_gmt":"2019-07-27T06:02:26","guid":{"rendered":"https:\/\/wp.winter-weng.cc\/work\/?p=515"},"modified":"2021-03-06T16:09:11","modified_gmt":"2021-03-06T08:09:11","slug":"%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f-%e8%a3%bd%e4%bd%9c%e5%88%86%e4%ba%ab%e6%b5%b7%e5%a0%b1","status":"publish","type":"post","link":"https:\/\/wp.winter-weng.cc\/work\/?p=515","title":{"rendered":"[\u5fae\u4fe1\u5c0f\u7a0b\u5e8f] \u88fd\u4f5c\u5206\u4eab\u6d77\u5831"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_75 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u986f\u793a\/\u96b1\u85cf\u5167\u5bb9\u76ee\u9304\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=515\/#canvasdrawImage\" >canvas.drawImage()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=515\/#base64_%E8%BD%89%E5%9C%96%E7%89%87\" >base64 \u8f49\u5716\u7247<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=515\/#%E4%BF%9D%E5%AD%98%E5%88%B0%E7%9B%B8%E7%B0%BF%E4%B8%AD\" >\u4fdd\u5b58\u5230\u76f8\u7c3f\u4e2d<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wp.winter-weng.cc\/work\/?p=515\/#%E5%B0%8F%E5%9D%91%EF%BC%9ACanvas_%E5%A6%82%E4%BD%95%E9%9A%B1%E8%97%8F\" >\u5c0f\u5751\uff1aCanvas \u5982\u4f55\u96b1\u85cf<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>\u5229\u7528\u5927\u9996\u5716\u3001\u5c0f\u7a0b\u5e8f\u78bc\uff0c\u4ee5\u53ca\u53d6\u5230\u7684\u8cc7\u8a0a\uff0c\u900f\u904e Canvas \u5408\u4f75\u6210\u4e00\u5f35\u5716\u3002\u7d55\u5927\u90e8\u5206\u53c3\u8003\u6b64\u7bc7\uff1a<a rel=\"noreferrer noopener\" href=\"https:\/\/juejin.im\/post\/5ca9b058e51d452b0f3346d0\" target=\"_blank\">\u5c0f\u7a0b\u5e8f\u5206\u4eab\u6a21\u5757\u8d85\u7ea7\u8be6\u89e3 (By \u4f60\u731c\u6211\u53eb\u5565)<\/a>\uff0c\u771f\u7684\u8d85\u7d1a\u8a73\u89e3\uff0c\u6536\u7a6b\u826f\u591a\u3002\u672c\u7bc7\u53ea\u7c21\u55ae\u63cf\u8ff0\u5e7e\u500b\u91cd\u8981\u6b65\u9a5f\u3002<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"canvasdrawImage\"><\/span>canvas.drawImage()<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p><a rel=\"noreferrer noopener\" aria-label=\"MDN: CanvasRenderingContext2D.drawImage() (\u5728\u65b0\u5206\u9801\u4e2d\u958b\u555f)\" href=\"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/API\/CanvasRenderingContext2D\/drawImage\" target=\"_blank\">MDN: CanvasRenderingContext2D.drawImage()<\/a><\/p>\n\n\n<p>\u7d66\u5b9a\u4e00\u5f35\u5716\u7247\u5f8c\uff0c\u53ef\u4ee5\u5c07\u5716\u7247\u8b80\u9032\u4f86\u7e6a\u88fd\u5728 canvas \u4e0a\u3002<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"base64_%E8%BD%89%E5%9C%96%E7%89%87\"><\/span>base64 \u8f49\u5716\u7247<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p>\u5c0f\u7a0b\u5e8f\u78bc\u751f\u6210 API \u6703\u7d66\u56de\u50b3 base64 \u8cc7\u6599\uff0c\u9700\u8981\u5c07\u5176\u8f49\u63db\u70ba image \u4e4b\u5f8c\uff0c\u518d\u900f\u904e\u4e0a\u8ff0\u65b9\u5f0f\u5c07\u5176\u7e6a\u88fd\u5728\u756b\u5e03\u4e0a\u3002<\/p>\n\n\n<p>\u9996\u5148\u5206\u6790 base64 \u8cc7\u6599\uff0c\u5229\u7528 <code>wx.base64ToArrayBuffer()<\/code> \u505a\u4e00\u6b21\u8f49\u63db\uff0c\u518d\u900f\u904e\u5c0f\u7a0b\u5e8f\u7684\u6587\u4ef6\u7ba1\u7406\u5668 <code>wx.getFileSystemManager()<\/code>\u53ca <code>writeFile<\/code> \u65b9\u6cd5\uff0c\u5c07 base64 \u5716\u7247\u8f49\u5b58\u5728\u672c\u5730\u6587\u4ef6\u593e (<code>wx.env.USER_DATA_PATH<\/code>) \u4e2d\u3002<\/p>\n\n\n<p>\u53c3\u8003\u4ee5\u4e0b\u7a0b\u5f0f\u78bc\uff0c\u4f86\u6e90\uff1a<a rel=\"noreferrer noopener\" aria-label=\"\u5c0f\u7a0b\u5e8f\u5206\u4eab\u6a21\u5757\u8d85\u7ea7\u8be6\u89e3 (By \u4f60\u731c\u6211\u53eb\u5565) (\u5728\u65b0\u5206\u9801\u4e2d\u958b\u555f)\" href=\"https:\/\/juejin.im\/post\/5ca9b058e51d452b0f3346d0\" target=\"_blank\">\u5c0f\u7a0b\u5e8f\u5206\u4eab\u6a21\u5757\u8d85\u7ea7\u8be6\u89e3 (By \u4f60\u731c\u6211\u53eb\u5565)<\/a>\u3002<\/p>\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* --\n\u4f5c\u8005\uff1a\u4f60\u731c\u6211\u53eb\u5565\n\u94fe\u63a5\uff1ahttps:\/\/juejin.im\/post\/5ca9b058e51d452b0f3346d0\n\u6765\u6e90\uff1a\u6398\u91d1\n-- *\/\nvar handleBase64Img = function() {\n    \/\/wx.getFileSystemManager \u5c0f\u7a0b\u5e8f\u6587\u4ef6\u7ba1\u7406\u5668\n    var fsm = wx.getFileSystemManager();\n    var FILE_NAME = 'base64src';\n    var base64src = function(base64data) {\n        return new Promise((resolve, reject) =&gt; {\n            \/\/\u89e3\u6790base64\uff0c\u63d0\u53d6\u51fa\u56fe\u7247\u7c7b\u578b: imgtype,\u89e3\u6790\u5185\u5bb9bodyData\uff08\u53bb\u6389data:image\/png;base64,\u4ee5\u540e\u7684\u5185\u5bb9\uff09\n            var [, imgType, bodyData] = \/data:image\\\/(\\w+);base64,(.*)\/.exec(base64data) || [];\n            if (!imgType) {\n                reject(new Error('ERROR_BASE64SRC_PARSE'));\n            }\n            \/**\n             *wx.env.USER_DATA_PATH\n             *\u672c\u5730\u7528\u6237\u6587\u4ef6\n             *\u672c\u5730\u7528\u6237\u6587\u4ef6\u662f\u4ece 1.7.0 \u7248\u672c\u5f00\u59cb\u65b0\u589e\u7684\u6982\u5ff5\u3002\u63d0\u4f9b\u4e86\u4e00\u4e2a\u7528\u6237\u6587\u4ef6\u76ee\u5f55\u7ed9\u5f00\u53d1\u8005\uff0c\u5f00\u53d1\u8005\u5bf9\u8fd9\u4e2a\u76ee\u5f55\u6709\u5b8c\u5168\u81ea\u7531\u7684\u8bfb\u5199\u6743\u9650\u3002\u901a\u8fc7 wx.env.USER_DATA_PATH \u53ef\u4ee5\u83b7\u53d6\u5230\u8fd9\u4e2a\u76ee\u5f55\u7684\u8def\u5f84\u3002\n             *\/\n            var filePath = `${wx.env.USER_DATA_PATH}\/${FILE_NAME}.${imgType}`;\n            \/\/\u6309\u6307\u5b9a\u5199\u5165\u6587\u4ef6\u7684\u5b57\u7b26\u7f16\u7801encoding\uff0c\u5411\u5730\u5740filepath\uff0c\u5199\u5165\u6570\u636edata\u3002\n            fsm.writeFile({\n                filePath,\n                data: bodyData,\n                encoding: 'base64',\n                success() {\n                    resolve(filePath);\n                },\n                fail() {\n                    reject(new Error('ERROR_BASE64SRC_WRITE'));\n                },\n            });\n        });\n    };\n    return base64src;\n}\nvar base64src = that.handleBase64Img();\nvar handleBase64src = base64src(base64data);\nhandleBase64src.then(res =&gt; {\n    \/\/res \u5373\u4e3abase64 \u8f6c\u5316\u4e3a\u56fe\u7247\u540e\u7684\u672c\u5730\u8def\u5f84\uff0c\u5373\u53ef\u5728\u753b\u5e03\u4e0a\u7ed8\u5236\u6210\u529f\n    that.ctx.drawImage(res, left, top, width, height);\n});<\/pre>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E4%BF%9D%E5%AD%98%E5%88%B0%E7%9B%B8%E7%B0%BF%E4%B8%AD\"><\/span>\u4fdd\u5b58\u5230\u76f8\u7c3f\u4e2d<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p>\u8981\u8b93\u4f7f\u7528\u8005\u4e0b\u8f09\u5716\u7247\uff0c\u5fc5\u9808\u5148\u6709\u8a2a\u554f\u76f8\u7c3f\u7684\u6b0a\u9650\u3002\u900f\u904e <code>wx.getSetting()<\/code> \u65b9\u6cd5\u53d6\u5f97\u6388\u6b0a\u8cc7\u6599\uff0c\u53d6\u5f97\u4e4b\u5f8c\u518d\u900f\u904e <code>wx.saveImageToPhotosAlbum()<\/code> \u53ca\u672c\u5730\u66ab\u6642\u751f\u6210\u7684 Url \u5c07\u5716\u7247\u5b58\u4e0b\u4f86\u3002<\/p>\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E5%B0%8F%E5%9D%91%EF%BC%9ACanvas_%E5%A6%82%E4%BD%95%E9%9A%B1%E8%97%8F\"><\/span>\u5c0f\u5751\uff1aCanvas \u5982\u4f55\u96b1\u85cf<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n<p>\u7e6a\u88fd\u7684\u6642\u5019\uff0c\u56e0\u70ba\u4e0d\u5e0c\u671b Canvas \u5f71\u97ff\u5230\u756b\u9762\uff0c\u56e0\u6b64\u6703\u5c07\u5b83\u85cf\u8d77\u4f86\uff0c\u4f46\u4e0d\u53ef\u4ee5\u4f7f\u7528 <code>display: none<\/code>\uff0c\u6703\u6293\u4e0d\u5230\u5143\u7d20\uff0c\u4e00\u500b\u89e3\u6cd5\u5982\u4e0b\uff1a<\/p>\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ wxml\n&lt;view class=\"container&gt;\n  &lt;canvas canvas-id='my-canvas'&gt;&lt;\/canvas&gt;\n&lt;view&gt;\n\/\/ css\n.container {\n  width: 0px;\n  height: 0px;\n  overflow: hidden;\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u5229\u7528\u5927\u9996\u5716\u3001\u5c0f\u7a0b\u5e8f\u78bc\uff0c\u4ee5\u53ca\u53d6\u5230\u7684\u8cc7\u8a0a\uff0c\u900f\u904e Can&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[10],"tags":[35],"class_list":["post-515","post","type-post","status-publish","format-standard","hentry","category-10","tag-35"],"_links":{"self":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=515"}],"version-history":[{"count":1,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/515\/revisions"}],"predecessor-version":[{"id":617,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/515\/revisions\/617"}],"wp:attachment":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}