Topwo博客-cocos creator H5版的拍照功能

您现在的位置是：Topwo博客>>Cocos文章

cocos creator H5版的拍照功能

发布时间：2021-09-27作者：Topwo来源：原创点击：355

#### 首先找到`/Applications/CocosCreator.app/Contents/Resources/static/preview-templates/index.jade`

添加一行h5唤起手机拍照和相册的拍照标签：
```html
input#input_picture(type='file' accept="image/*" style="display: none")
```
在项目脚本中增加代码如下：
```javascript
properties: {
    ...
    aSprite:{
        type: cc.Sprite,
        default: null
    }
},
// 设置充值二维码
setQRCode(strQR){
    let strImg = /*"data:image/jpeg;base64," + */strQR;
    let img = new Image();
    img.src = strImg;
    let texture = new cc.Texture2D();
    texture.initWithElement(img);
    texture.handleLoadedTexture();
    this.aSprite.spriteFrame = new cc.SpriteFrame(texture);
},

takePicture(){
    var self = this;
    var input_picture = document.getElementById('input_picture');
    input_picture.onchange = function (event1) {
        var files = event1.target.files;
        if (files && files.length > 0) {
            try {
                //实例化一个FileReader
                var fileReader = new FileReader();
                //监听onloadend读取完成事件
                fileReader.onload = function (event2) {　　　　// 获取照片的base64编码
                    if (fileReader.readyState == fileReader.DONE) {
                        // compressPicture(event2.target.result);　　// 压缩照片
                        self.setQRCode(event2.target.result);
                    }
                };
                //使用readAsDataURL()方法读取文件流
                fileReader.readAsDataURL(files[0]);
            }
            catch (e) {
                alert(common.MESSAGE.title.error, '拍照失败,请联系客服或尝试更换手机再试!');
            }
        }
    }
    // 添加需要处理的代码
    input_picture.click();
},
```
在项目中只要调用takePicture方法，就可以调用设备拍照或者相册，拍完照，调用setQRCode方法，cocos引擎会使用图片的base64创建图片，从而添加到显示对象上。

上一篇：cocos2d-x call to OpenGL ES API with no current context(logged once per thread)

下一篇：解读AppStore新规：游戏该如何加速广电审核！