一、案例效果

《手机摄影大赛模板》

二、场景应用

用户需要在H5中上传照片，照片可用于跟其他图片元素生成海报或转发出去，可以选择拍照、或者选取相册中现有照片。目前该组件调用的是微信拍照接口，需在微信环境下生效，且每个公众号仅支持调用5000次/天，

若需避开该限制，只需勾选编辑器界面的【使用上传照片替代微信拍照】即可。

三、素材准备

如果需要替换微信拍照组件的标志素材，需要准备2张上传照片的标志图片，这两个小图片的尺寸必须保持一致，大小控制在30Kb左右。

2.因为微信拍照仅仅是一个功能组件，上传照片后，照片自己是不能显示的，需要我们再加一张图片，专门用于上传照片的显示。

这个照片的尺寸跟比例原理上应该跟上传照片的一致，但是用户上传何种尺寸比例的图片没有办法预测，所以上传后的照片只需要注意一个问题即可，即设置显示方式为【缩放以适合】或者【缩放以填充】，只有这两种显示方式，照片才不会变形。

四、组件用法

基本用法

1.添加微信拍照组件。选中微信拍照组件，可以替换微信拍照组件的标志元素。

2.给微信拍照组件设置【成功时】，【替换资源文件】，替换的就是提前放置在页面中的那张图。

整个设置过程动图演示：

高级用法

1.用于替换照片的图片，勾选可编辑后，上传的照片可以用双指调整大小。

2.拍照或选取图片后，由于之前设置了拍照后触发“替换资源文件”操作，此时会弹出图片编辑器，可以对图片进行位置和大小的调整，点击“查看效果”，确认调整。

3.处于该界面时可调整

4.设置微信开发者信息

（1）体验版／基础版用户作品中，拍照后图片调整页将会出现“Epub360 免费技术支持”字样；

（2）专业版用户作品，不会出现上述提示信息；

（3）使用微信拍照组件，必须有经过认证的服务号，并正确设置微信开发者信息，正常是默认使用意派的，没有特殊情况不需要修改。了解如何设置微信开发者信息 。

5.后台查看照片。后台查看照片，至少是专业版用户有该权限。

（1）用户上传照片后，我没有使用数据库，怎样才能在后台查看？（教程链接）

（2）用户上传照片到数据库，我该怎样设置？（教程链接）

（3）用户参与我发起的拍照大赛，怎样在后台查看并实时更新在H5页面上？（教程链接）

除了使用微信拍照组件实现【上传照片】的功能，还可以用一个触发行为实现该功能，具体教程戳链接：微信拍照／上传照片触发行为教程。注意：不管是用组件还是触发行为实现上传照片功能，方法二选一，不需要混用，错误示范如下：

正确设置如下:

五、相关Q&A

1. 微信拍照组件中显示的微信公众号信息可以修改吗？

可以，但是需要时专业版及以上版本的用户才可以修改。

（A）体验版／基础版用户作品中，拍照后图片调整页将会出现“Epub360 免费技术支持”字样；

（B）专业版用户作品，不会出现上述提示信息；

（C）使用微信拍照组件，必须有经过认证服务号，并正确设置微信开发者信息（如下图所示）才能正常使用。了解如何设置微信开发者信息 。

2. 微信拍照组件开启微信功能失败怎么办？

（1）作品素材大，造成加载慢，启用微信功能失败；建议压缩素材大小；若拍照／上传照片的页面是在页面0，建议一定要把页面0的或者加载页的素材处理的特别小（不要几百KB以上），方便打开H5时提前加载好内容；并且在页面0加载时，就预加载其他页面（页面预加载教程）。

（2）检查公众号APPID设置是否有问题，建议【默认】直接使用意派的（了解APPID设置）；如果是使用的是自己的还有问题，需要检查配置是否正确。（下图是默认使用Epub360的 公众号APPID）

（3）因为拍照功能是调用的微信接口，打开作品有一个初始化的过程，如果非常迅速的去上传照片测试，就会有失败的情况。

3. 部分图片在使用微信拍照组件时会翻转90度，该怎么办？

建议在作品信息面板上勾选使用上传图片代替微信拍照试试。