1. 获取手机相册图片

2. 在 Cocos Creator 中加载相册图片

3. Cocos Creator 屏幕截图

4. 使用HMTL显示截屏图片

5. 保存图片到相册

1. 获取相册图片

let input = document.createElement("input");
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.setAttribute('style', 'position:absolute;margin-left:30%;margin-top:50px;-webkit-user-select:file')
document.getElementsByTagName('body')[0].appendChild(input);

let oninput = (e) => {//拿到文件对象var file = e.target.files[0];//读取文件数据reader = new FileReader();reader.readAsDataURL(file);//文件加载成功以后，渲染到页面reader.onload = (e)=> {...}
}//监听input的change事件
input.addEventListener('change', oninput);

2. 在 Cocos Creator 中加载相册图片

reader.onload = (e)=> {//创建一个img标签加载图片数据var img = document.createElement("img");img.src = e.target.result;//再通过img转换成Creator的Textures2D对象let texture = new cc.Texture2D();texture._nativeAsset = img;texture.on('load', () => {//最后设置到精灵上this.sprite.spriteFrame = new cc.SpriteFrame(texture);})
}

1. 创建 img 标签，将读取到的图片设置到 img.src 属性

2. 创建 cc.Texture2D 对象，加载 img 中的纹理

3. 当 Textrue2D 的 load 事件完成，就可以显示到精灵组件上了

3. Cocos Creator 屏幕截图

save () {//创建 HTML canvas 标签保存图像数据this.createCanvas();//将canvas的图数据保存到HTML img元素上var img = this.createImg();//显示这个HTML img 元素this.showImage(img);this.iconBg.active = true;this.label.node.active = true;
}

showImage(img) {//var img = document.createElement("img");let offset = (cc.view._frameSize.width - this.srpite.node.width) / 2;let top = (cc.view._frameSize.height - this.srpite.node.width) / 2;cc.log('fs:', cc.view._frameSize.width);cc.log('offset:', offset, img.width);img.setAttribute('style', `position:absolute;margin-left:${offset}px ;margin-top:${top}px`);document.getElementsByTagName('body')[0].appendChild(img);this._img = img;
}

4. 保存图片到相册

小结