{"id":1157,"date":"2019-03-06T15:51:44","date_gmt":"2019-03-06T07:51:44","guid":{"rendered":"http:\/\/www.jiandaima.com\/blog\/?p=1157"},"modified":"2019-03-06T15:52:25","modified_gmt":"2019-03-06T07:52:25","slug":"%e6%ba%90%e7%a0%81%e5%88%86%e4%ba%ab%e5%b0%8f%e7%a8%8b%e5%ba%8f%e6%b5%b7%e6%8a%a5%e7%bb%84%e4%bb%b6-%e7%94%9f%e6%88%90%e6%9c%8b%e5%8f%8b%e5%9c%88%e5%88%86%e4%ba%ab%e6%b5%b7%e6%8a%a5%e5%b9%b6%e7%94%9f","status":"publish","type":"post","link":"http:\/\/www.jiandaima.com\/blog\/archives\/1157.html","title":{"rendered":"\u6e90\u7801\u5206\u4eab\u5c0f\u7a0b\u5e8f\u6d77\u62a5\u7ec4\u4ef6-\u751f\u6210\u670b\u53cb\u5708\u5206\u4eab\u6d77\u62a5\u5e76\u751f\u6210\u56fe\u7247"},"content":{"rendered":"

\u6e90\u7801\u5206\u4eab\u5c0f\u7a0b\u5e8f\u6d77\u62a5\u7ec4\u4ef6-\u751f\u6210\u670b\u53cb\u5708\u5206\u4eab\u6d77\u62a5\u5e76\u751f\u6210\u56fe\u7247\uff0cwxa-plugin-canvas \u5c0f\u7a0b\u5e8f\u6d77\u62a5\u7ec4\u4ef6 \u4f7f\u7528npm\u5f00\u53d1\u3002
\n\u5c0f\u7a0b\u5e8f\u6d77\u62a5\u7ec4\u4ef6\u6982\u8ff0\uff1a
\nwxa-plugin-canvas\u662f\u4e00\u4e2a\u751f\u6210\u4e8c\u7ef4\u7801\u6d77\u62a5\u7684\u7ec4\u4ef6\uff0c\u901a\u8fc7\u975e\u5e38\u7b80\u5355\u7684\u914d\u7f6e\u5c31\u53ef\u4ee5\u751f\u6210\u7cbe\u7f8e\u7684\u6d77\u62a5
\n\u751f\u6210\u6548\u679c\u5982\u4e0b\uff1a
\n\"\"<\/p>\n

\u4f7f\u7528\u4e4b\u524d
\n\u4f7f\u7528 wxa-plugin-canvas \u524d\uff0c\u8bf7\u786e\u4fdd\u4f60\u5df2\u7ecf\u5b66\u4e60\u8fc7\u5fae\u4fe1\u5b98\u65b9\u7684 \u5c0f\u7a0b\u5e8f\u7b80\u6613\u6559\u7a0b \u548c \u81ea\u5b9a\u4e49\u7ec4\u4ef6\u4ecb\u7ecd\u3002<\/p>\n

\u5b89\u88c5
\n\u65b9\u5f0f\u4e00.\u901a\u8fc7 npm \u5b89\u88c5 (\u63a8\u8350)
\n\u5c0f\u7a0b\u5e8f\u5df2\u7ecf\u652f\u6301\u4f7f\u7528 npm \u5b89\u88c5\u7b2c\u4e09\u65b9\u5305\uff0c\u8be6\u89c1 npm \u652f\u6301<\/p>\n

\r\n# npm\r\nnpm i wxa-plugin-canvas -S --production\r\n\r\n# yarn\r\nyarn add wxa-plugin-canvas --production<\/pre>\n
\u65b9\u5f0f\u4e8c.\u4e0b\u8f7d\u4ee3\u7801
\n\u76f4\u63a5\u901a\u8fc7 git \u4e0b\u8f7d wxa-plugin-canvas \u6e90\u4ee3\u7801\uff0c\u5e76\u5c06miniprogram_dist\u76ee\u5f55\u62f7\u8d1d\u5230\u81ea\u5df1\u7684\u9879\u76ee\u7ec4\u4ef6\u76ee\u5f55\u4e2d<\/p>\n
\u4f7f\u7528\u7ec4\u4ef6<\/p>\n
{\r\n  "usingComponents": {\r\n\t"poster": "wxa-plugin-canvas\/poster",\r\n  }\r\n}<\/pre>\n
\u63a5\u7740\u5c31\u53ef\u4ee5\u5728 wxml \u4e2d\u76f4\u63a5\u4f7f\u7528\u7ec4\u4ef6<\/p>\n
<poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">\r\n    <button>\u70b9\u51fb\u751f\u6210\u6d77\u62a5<\/button>\r\n<\/poster><\/pre>\n
\u4f7f\u7528\u6ce8\u610f\u4e8b\u9879
\n\u56fe\u7247\u7684\u57df\u540d\u52a1\u5fc5\u6dfb\u52a0\u5230downloadFile\u5408\u6cd5\u57df\u540d\u4e2d\uff08\u5f00\u53d1\u8bbe\u7f6e-\u670d\u52a1\u5668\u57df\u540d-downloadFile\u5408\u6cd5\u57df\u540d\uff09
\n\u5982\u679c\u8981\u4f7f\u7528\u5f02\u6b65\u751f\u6210\u6d77\u62a5\u7684\u65b9\u6cd5\uff0c\u52a1\u5fc5\u7ec4\u4ef6\u8981\u52a0\u4e0a<\/p>\n
id="poster"<\/pre>\n
\u4e8b\u4ef6
\nsuccess
\n\u8fd4\u56de\u751f\u6210\u6d77\u62a5\u56fe\u7247\u7684\u672c\u5730url\uff0c\u4e00\u822c\u505a\u6cd5\u662f\u4f7f\u7528wx.previewImage\u9884\u89c8\u6d77\u62a5\uff0c\u5982\u4e0b<\/p>\n
onPosterSuccess(e) {\r\n\tconst { detail } = e;\r\n\twx.previewImage({\r\n        current: detail,\r\n        urls: [detail]\r\n    })\r\n}<\/pre>\n
fail
\n\u8fd4\u56de\u9519\u8bef\u4fe1\u606f<\/p>\n
\u5f02\u6b65\u751f\u6210\u6d77\u62a5
\n\u6709\u4e9b\u573a\u666f\u53ef\u80fd\u9700\u8981\u53d1\u8d77ajax\u8bf7\u6c42\u540e\u624d\u80fd\u83b7\u53d6\u751f\u6210\u6d77\u62a5\u7684\u6570\u636e\uff0c\u8fd9\u91cc\u63d0\u4f9b\u4e86\u5f02\u6b65\u751f\u6210\u6d77\u62a5\u7684\u65b9\u5f0f\u3002<\/p>\n
\u53ea\u9700\u8981\u5f15\u5165\u7ec4\u4ef6\u4e2d\u7684poster\/poster.js\uff0c\u5982\u4e0b\u8c03\u7528\u5c31\u884c\u4e86<\/p>\n
import Poster from '..\/..\/miniprogram_dist\/poster\/poster';\r\nPage({\r\n    \/**\r\n     * \u5f02\u6b65\u751f\u6210\u6d77\u62a5\r\n     *\/\r\n    onCreatePoster() {\r\n    \t\/\/ setData\u914d\u7f6e\u6570\u636e\r\n    \tthis.setData({ posterConfig: {...} }, () => {\r\n        \tPoster.create(); \r\n    \t});\r\n    }\r\n})<\/pre>\n
\u4e0b\u8f7d\u5730\u5740:<\/p>\n
https:\/\/github.com\/jasondu\/wxa-plugin-canvas<\/p>\n","raw":"","protected":false},"excerpt":{"rendered":"
\u6e90\u7801\u5206\u4eab\u5c0f\u7a0b\u5e8f\u6d77\u62a5\u7ec4\u4ef6-\u751f\u6210\u670b\u53cb\u5708\u5206\u4eab\u6d77\u62a5\u5e76\u751f\u6210\u56fe\u7247\uff0cwxa-plugin-canvas \u5c0f\u7a0b\u5e8f\u6d77\u62a5\u7ec4\u4ef6 \u4f7f\u7528npm\u5f00\u53d1\u3002<\/p>\n","protected":false},"author":1,"featured_media":1158,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[407,408,99],"class_list":["post-1157","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-development-of-communication-technology","tag-407","tag-408","tag-99"],"post_thumbnail_image":"http:\/\/images.jiandaima.com\/blog\/wp-content\/uploads\/2019\/03\/img_5c7f7b3598604.png?imageView2\/1\/w\/300\/h\/300#","content_first_image":"http:\/\/images.jiandaima.com\/blog\/wp-content\/uploads\/2019\/03\/img_5c7f7b3598604.png","post_medium_image_300":"http:\/\/images.jiandaima.com\/blog\/wp-content\/uploads\/2019\/03\/img_5c7f7b3598604.png?imageView2\/1\/w\/337\/h\/600#","post_thumbnail_image_624":"http:\/\/images.jiandaima.com\/blog\/wp-content\/uploads\/2019\/03\/img_5c7f7b3598604.png","post_frist_image":"http:\/\/images.jiandaima.com\/blog\/wp-content\/uploads\/2019\/03\/img_5c7f7b3598604.png","post_medium_image":"http:\/\/images.jiandaima.com\/blog\/wp-content\/uploads\/2019\/03\/img_5c7f7b3598604.png?imageView2\/1\/w\/337\/h\/600#","post_large_image":"http:\/\/images.jiandaima.com\/blog\/wp-content\/uploads\/2019\/03\/img_5c7f7b3598604.png","post_full_image":"http:\/\/images.jiandaima.com\/blog\/wp-content\/uploads\/2019\/03\/img_5c7f7b3598604.png","post_all_images":[{"imagesurl":"http:\/\/images.jiandaima.com\/blog\/wp-content\/uploads\/2019\/03\/img_5c7f7b3598604.png?imageView2\/1\/w\/800\/h\/1422#","id":"image0"}],"videoAdId":"","listAd":"0","listAdId":"","listAdEvery":5,"total_comments":0,"category_name":"\u5f00\u53d1\u6280\u672f\u4ea4\u6d41","post_date":"2019-03-06","like_count":"0","praiseWord":"\u9f13\u52b1","copyright_state":"","excitationAd":"0","rewardedVideoAdId":"","detailAdId":"","detailAd":"0","enterpriseMinapp":"0","audios":[],"postImageUrl":"http:\/\/images.jiandaima.com\/blog\/wp-content\/uploads\/2020\/02\/img_5e44112722964.png","avatarurls":[],"related_posts":[],"pageviews":1037,"next_post_id":1173,"next_post_title":"java\u6bd5\u4e1a\u8bbe\u8ba1\u5b66\u4e60_\u5b9a\u505a_\u8ba1\u7b97\u673a\u6bd5\u4e1a\u8bba\u6587\u4e0b\u8f7d\u5e73\u53f0","previous_post_id":1142,"previous_post_title":"\u67d0\u7535\u5b50\u5546\u52a1\u7f51\u7ad9\u8d2d\u7269\u8f66\u4fc3\u9500\u4f18\u60e0java\u7b97\u6cd5","_links":{"self":[{"href":"http:\/\/www.jiandaima.com\/blog\/wp-json\/wp\/v2\/posts\/1157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.jiandaima.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jiandaima.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jiandaima.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jiandaima.com\/blog\/wp-json\/wp\/v2\/comments?post=1157"}],"version-history":[{"count":0,"href":"http:\/\/www.jiandaima.com\/blog\/wp-json\/wp\/v2\/posts\/1157\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.jiandaima.com\/blog\/wp-json\/wp\/v2\/media\/1158"}],"wp:attachment":[{"href":"http:\/\/www.jiandaima.com\/blog\/wp-json\/wp\/v2\/media?parent=1157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jiandaima.com\/blog\/wp-json\/wp\/v2\/categories?post=1157"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jiandaima.com\/blog\/wp-json\/wp\/v2\/tags?post=1157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}