1、案例效果

《手机摄影大赛模板》

2. 场景应用

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

如果您需要规避此限制，只需在编辑器界面勾选【使用上传的照片代替微信拍照】即可。

3、材料准备

如果需要更换微信照片组件的logo素材，需要准备2张上传照片的logo图片。 这两个小图片的大小必须一致，大小控制在30Kb左右。

2.由于微信拍照只是一个功能组件，上传照片后，照片本身无法显示。 我们需要添加另一张图片专门用于显示上传的照片。

原则上，这张照片的尺寸和比例应该与上传的照片一致，但是无法预测用户将上传的图片的尺寸和比例，所以上传后只需要注意一个问题照片，就是将显示模式设置为【缩放以适合】或【缩放以填充】，只有这两种显示方式才能防止照片变形。

4. 组件使用

基本用法

1.添加微信拍照组件。 选择微信相机组件，替换微信相机组件的logo元素。

2.为微信照片组件设置【成功时】和【替换资源文件】。 预先放置在页面上的图片将被替换。

整个设置过程的动画演示：

高级用法

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

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

3、该界面下可调节

4.设置微信开发者信息

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

(2) 对于专业版用户作品，不会出现上述提示信息；

（3）要使用微信相机组件，您必须拥有经过认证的服务帐号并正确设置微信开发者信息。 一般情况下默认使用易拍。 除特殊情况外无需修改。 了解如何设置微信开发者信息。

5. 在后台查看照片。 后台查看照片，至少Pro版用户有此权限。

（1）用户上传照片后，我不使用数据库。 如何在后台查看？ （教程链接）

(2) 用户上传照片到数据库，应该如何设置？ （教程链接）

（3）用户参加我发起的摄影比赛时，如何在后台查看并实时更新到H5页面？ （教程链接）

除了使用微信照片组件来实现【上传照片】功能外，还可以使用触发行为来实现该功能。 具体教程点击链接：微信拍照/上传照片触发行为教程。 注意：无论是使用组件还是触发行为来实现照片上传功能，两种方式选择其一即可。 无需将它们混合。 错误演示如下：

正确的设置如下：

五、相关问答

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

可以，但只有专业版及以上版本的用户才能根据需要进行修改。

(A) 试用版/基础版用户作品中，拍照后图片调整页面会出现“免费技术支持”字样；

(B) 对于专业版用户作品，不会出现上述提示信息；

(C) 要使用微信相机组件，您必须拥有经过认证的服务帐号并正确设置微信开发者信息（如下图所示）才能正常使用。 了解如何设置微信开发者信息。

2、微信相机组件无法启用微信功能怎么办？

（1）作品素材较大，导致加载缓慢、无法启用微信功能； 建议压缩材料尺寸； 如果拍照/上传照片的页面在第0页，建议将第0页或加载页面的素材处理得极小（（不超过几百KB），以便可以加载内容打开H5时提前；并且当第0页加载时，会预加载其他页面（页面预加载教程）。

（2）检查公众账号设置是否存在问题。 建议按【默认】直接使用易拍（了解设置）； 如果使用自己的还是有问题，需要检查配置是否正确。 （下图为默认使用的公众号）

（3）由于拍照功能是通过微信接口调用的，所以打开作品时有一个初始化过程。 如果你上传照片太快进行测试，就会出现失败的情况。

3、使用微信相机组件时，部分图片会翻转90度。 我应该怎么办？

建议勾选工作信息面板上的复选框，使用上传的图片，而不是微信拍照。