浏览器环境下导入本地图片

Creator 2.x
#1

动态在代码中创建类型为type的input控件，打开本地目录。这样不用在html文件中写< input id=“file” type=“file”/>

// <input id="file" type="file"/>
this.loadFileElement = document.createElement('input');
this.loadFileElement.type = 'file';
this.loadFileElement.style.opacity = 0;
(document.getElementById('content') || document.getElementById('GameDiv')).appendChild(this.loadFileElement);
// 绑定选中文件后的回调
this.loadFileElement.addEventListener('change', this._fileSelect.bind(this.loadFileElement, this), false);

读取选中的文件

const mime = { 'png': 'image/png', 'jpg': 'image/jpeg'};
_fileSelect(hitBox, evt) {
    let file = evt.target.files[0];
    let type = file.type;
    if (!type) {
        type = mime[file.name.match(/.([^.]+)$/i)[1]];
    }
    let reader = new FileReader();
    reader.onload = (function(file) {
            return function() {
                let img = new Image();
                img.src = this.result;
                let texture = new cc.Texture2D();
                texture.initWithElement(img);
                texture.handleLoadedTexture();
                let spriteFrame = new cc.SpriteFrame(texture);
                // 设置spriteFrame
                hitBox._avatar.$Sprite.trim = false;
                hitBox._avatar.$Sprite.sizeMode = cc.Sprite.SizeMode.RAW;
                hitBox._avatar.$Sprite.spriteFrame = spriteFrame;
            };
     })(file);
    //读取文件内容
    reader.readAsDataURL(file);
}

响应按钮事件，打开目录

on_btnSelectAvatar() {
        this.loadFileElement.click();
}
4赞
#2

可以。就是一般用不上

#3

做工具的时候用得上

#4

最近要写个工具，刚好用上，感谢楼主，顺便再把我下载配置文件的代码贴上，一套就全了
saveForWebBrowser() {
let JsonString = JSON.stringify({a:123, b:“gggggg”}); //需要保存的json字符串
if (cc.sys.isBrowser) {
let textFileAsBlob = new Blob([JsonString]);
let downloadLink = document.createElement(“a”);
downloadLink.download = “fileName”;
downloadLink.innerHTML = “Download File”;
if (window.URL != null) {
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
}
downloadLink.click();
}
}

1赞
#5

代码格式乱了，看着不方便。:joy: