cocoscreator打开相册或者读取本地图片并进行显示

CocosCreator发布web版打开相册或者读取电脑本地图片操作

1.如果要在项目预览的时候生效，首先需要修改一下引擎的预览文件 index.jade。

具体的路径一般在引擎编辑器目录下的    \resources\static\preview-templates

新增1行代码：

<input id="OpenImageFile" type="file" capture="camera" accept="image/*"/>

在这里要注意一下缩进，不然预览的时候可能会出错

在构建web版本的时候也需要在index.html文件里面加上input标签，但是格式稍有不同，具体如下：

//后面的style主要是为了不让上传文件的div节点显示在我们的页面中，免得影响我们的页面布局
<input id="OpenImageFile" type="file" capture="camera" accept="image/*" style="visibility: hidden">

 2.前期工作准备好之后，准备以下代码：

let OpenImageFile = {

    /**
     * 允许重复上传
     * 这里的函数操作主要是为了允许可以重复打开同一个文件
     */
    canRepeatUpload() {
        let input_imageFile = document.getElementById('OpenImageFile');
        if (input_imageFile == null) {
            cc.log('上传失败');
            return;
        }
        if (input_imageFile.outerHTML) {
            input_imageFile.outerHTML = input_imageFile.outerHTML;
        }
        if (input_imageFile.value) input_imageFile.value = null;
    },

    /**
     * 打开文件操作
     */
    openFile() {
        let input_imageFile = document.getElementById('OpenImageFile');
        if (input_imageFile == null) return;
        // 添加需要处理的代码
        input_imageFile.onchange = function (event) {
            let files = event.target.files;
            let upType = files[0].type;
            if (upType == 'image/gif' || upType.indexOf("image") < 0) {
                alert('只允许上传图片文件！');
                OpenImageFile.canRepeatUpload();
                return;
            }
            if (files && files.length > 0) {
                try {
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL(files[0]);
                    //限制允许上传的图片最大为5m
                    if (files[0].size > (1024 * 1024 * 5)) {
                        alert("文件过大，请重新选择");
                        OpenImageFile.canRepeatUpload();
                        return;
                    }
                    fileReader.onload = function (event2) {
                        //读取图片的操作
                        if (fileReader.readyState == fileReader.DONE) {
                            OpenImageFile.canRepeatUpload();
                            let strImg = event2.target.result;
                            let img = new Image();
                            img.src = strImg;
                            img.onload = function () {
                                //将读取到图片生成一个可以给sprite使用的texture
                                let texture = new cc.Texture2D();
                                texture.initWithElement(img);
                            }
                        }
                    };
                } catch (e) {
                    alert('文件读取失败，请再试一次');
                    OpenImageFile.canRepeatUpload();
                    return;
                }
            }

        };
        input_imageFile.click();
    },
};
module.exports = OpenImageFile;

3.具体使用方法：在你要使用的地方，例如按钮的点击事件上调用openFile()方法。即可获取到读取的图片信息。如果要显示获取到的图片，则将上方获取到的texture生成为一个spriteFrame即可。