Watch "program Little Prince" public reply [avatar Number Generator] source available!

Now I focus on what implementation Cocos Creator H5 picture generated:

file

Acquire mobile photo album pictures
Load pictures in albums in Cocos Creator
Cocos Creator Screenshots
Use HMTL display screenshots
Save image to album

Getting album pictures

To obtain the phone picture album, you need to use the browser's ability to provide input tag in the desktop browser is browse the file directory to select the picture.

Use document dynamically created input HTML tag, and set the properties for the type to file, accept as "image / *", while using CSS Control about the location of input

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);

After selecting the picture, you also need to listen change event input tag, we may facilitate data acquisition picture:

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

//监听input的change事件
input.addEventListener('change', oninput);

Load pictures in albums in Cocos Creator

onload callback event FileReader, we will put pictures in HTML img tag

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);     
        })
}

Creating img tag will be read to the picture settings to img.src property
Cc.Texture2D create objects, textures loaded img
When Textrue2D the load event is completed, it can be displayed on the wizard component

It should be noted, Cocos Creator can not show more than 2048 * 2048 picture, you'll find that the phone directly on the phone to shoot high-quality pictures displayed is a black.

Cocos Creator Screenshots

Set avatar prospects box is very simple, do not say here, I see how the preservation picture synthesis. Here is an example of Cocos Creator of reference of the combined set capture_to_web practice, simply modify a bit, click the button to generate the screenshot:

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;
}

Here students look ShowImage point of this function, I have modified the collection of practice examples:

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;
}

The above code is mainly calculated img element location, it is placed in the middle of the browser screen.

Save image to album

Cocos Creator in the browser engine can not write files, so we are on top of a picture display HTML img instead of displaying a Sprite. We press img element brings up the menu to save the browser on your phone, you can save the right mouse button on the desktop browser, you can also drag directly to the desktop.

summary

Use Cocos Creator can not only develop games, but also to create an effective small application, if the load some Shader effects in the picture is not it will cool it?