A_side_PRJ_4/assets/Lobby/scripts/homesence/MaskPhotoView.js

cc.Class({
    extends: cc.Component,

    properties: {
        imageNode: cc.Node,
    },

    distance(a, b) {
        let _x = b.x - a.x;
        let _y = b.y - a.y;
        return Math.sqrt(_x * _x + _y * _y);
    },

    onLoad() {
        this.maskEdge = 600;

        this.touch1 = null;
        this.touch2 = null;
        this.scaleRate = 0;
        this.lastRate = 1;
        this.distance1 = 0;
        this.distance2 = 0;

        this.node.on(cc.Node.EventType.TOUCH_START, (event) => {
            this.lastRate += this.scaleRate;
            this.targetPos = null;
            this.touch2 = null;
            this.touch1 = event.getLocation();
            this.lastMovePos = event.getLocation();
        })
        this.node.on(cc.Node.EventType.TOUCH_MOVE, (event) => {
            let location = event.getLocation();
            this.touch1 = location;

            if (event._touches.length >= 2) {
                if (!this.touch2) {
                    this.touch2 = event._touches[1]._point;
                    this.distance1 = this.distance(this.touch1, this.touch2);
                } else {
                    // this.touch1 = event._touches[0]._point;
                    // this.touch2 = event._touches[1]._point;
                    // this.distance2 = this.distance(this.touch1, this.touch2);
                    // let rate1 = Math.abs(this.distance2 - this.distance1) / 300;
                    // let rate2 = rate1 + this.scaleRate;

                    // if (rate2 < 0 || rate2 > 3) { return; }

                    // this.scaleRate = rate1;
                    // this.imageNode.setScale(rate2);

                }
            } else {
                let vec = location.sub(this.lastMovePos);
                if (!this.targetPos) { this.targetPos = this.imageNode.position; }
                else { this.targetPos = this.targetPos.add(vec); }
                this.lastMovePos = location;
            }
        })
    },

    update() {
        if (this.targetPos) {
            let posX = this.imageNode.position.x;
            let posY = this.imageNode.position.y
            posX = cc.misc.lerp(posX, this.targetPos.x, 0.25);
            posY = cc.misc.lerp(posY, this.targetPos.y, 0.25);

            let offsetX = Math.abs(this.imageNode.width / 2 - this.maskEdge / 2);
            let offsetY = Math.abs(this.imageNode.height / 2 - this.maskEdge / 2);
            if (posX > offsetX) {
                posX = offsetX;
            } else if (posX < -offsetX) {
                posX = -offsetX;
            } if (posY > offsetY) {
                posY = offsetY;
            } else if (posY < -offsetY) {
                posY = -offsetY;
            }
            this.imageNode.position = cc.v2(posX, posY);
        }
    },

    onDestroy() {
        if (this.tempTexture) {
            cc.loader.release(this.tempTexture);
            this.tempTexture = null;
        }
    },

    initPhoto: function (path, head_img) {
        this.head_img = head_img;
        this.lastMovePos = cc.v2(0, 0);
        this.imageNode.position = cc.v2(0, 0);
        let sprite = this.imageNode.getComponent(cc.Sprite);
        cc.loader.load(path, (err, tex) => {
            if (err) {
                cc.error(err);
            } else {
                this.maskEdge = 600;

                this.touch1 = null;
                this.touch2 = null;
                this.scaleRate = 0;
                this.lastRate = 1;
                this.distance1 = 0;
                this.distance2 = 0;

                this.tempTexture = tex;
                let width = tex.width;
                let height = tex.height;
                let spriteFrame = new cc.SpriteFrame(tex);

                let scale = 0;
                if (width < this.maskEdge && height > this.maskEdge) {
                    scale = width / this.maskEdge;
                    height *= scale;
                } else if (width > this.maskEdge && height < this.maskEdge) {
                    scale = height / this.maskEdge;
                    width *= scale;
                } else if (width < this.maskEdge && width > height) {
                    scale = height / this.maskEdge;
                    width *= scale;
                    height *= scale;
                } else if (height < this.maskEdge && width < height) {
                    scale = width / this.maskEdge;
                    width *= scale;
                    height *= scale;
                } else if (width > this.maskEdge && height > this.maskEdge && width > height) {
                    scale = this.maskEdge / height;
                    width *= scale;
                    height *= scale;
                } else if (height > this.maskEdge && height > this.maskEdge && width < height) {
                    scale = this.maskEdge / width;
                    width *= scale;
                    height *= scale;
                }

                this.imageNode.width = width;
                this.imageNode.height = height;
                sprite.spriteFrame = spriteFrame;
            }
        });
    },


    onBtnConfirm: function () {
        let node = new cc.Node();
        node.parent = cc.director.getScene();
        let camera = node.addComponent(cc.Camera);
        camera.cullingMask = 0xffffffff;

        let visibleSize = cc.view.getVisibleSize();
        node.x = visibleSize.width / 2;
        node.y = visibleSize.height / 2;

        //修改camera的参数可以控制部分截图，详情请参看官方文档
        camera.alignWithScreen = false;
        camera.orthoSize = 200;
        camera.position = cc.v2(200, 200);

        let width = this.maskEdge;
        let height = this.maskEdge;
        let texture = new cc.RenderTexture();
        texture.initWithSize(width, height, cc.game._renderContext.STENCIL_INDEX8);
        camera.targetTexture = texture;
        camera.render();
        let data = texture.readPixels();
        let picData = new Uint8Array(width * height * 4);
        let rowBytes = width * 4;
        for (let row = 0; row < height; row++) {
            let srow = height - 1 - row;
            let start = srow * width * 4;
            let reStart = row * width * 4;
            for (let i = 0; i < rowBytes; i++) {
                picData[reStart + i] = data[start + i];
            }
        }

        let filePath = jsb.fileUtils.getWritablePath() + 'uploadHead.png';
        let success = jsb.saveImageData(picData, width, height, filePath);
        if (success) {
            cc.loader.load(filePath, (err, tex) => {
                if (err) {
                    cc.error(err);
                } else {
                    let sprite = this.head_img;
                    this.tempTexture = tex;
                    let spriteFrame = new cc.SpriteFrame(tex);
                    sprite.spriteFrame = spriteFrame;
                    setTimeout(() => {
                        let data = jsb.fileUtils.getDataFromFile(filePath);
                        let sendData = "image=" + this._arrayBufferToBase64(data) + "&UserID=" + cc.vv.globalUserInfo.getUserID();
                        let xhr = new XMLHttpRequest();
                        xhr.onload = () => { cc.log("成功") }
                        xhr.onerror = () => { cc.log("失败") }
                        xhr.onreadystatechange = () => {
                            cc.log(xhr.status)
                            if (xhr.readyState !== 4) { return; }
                            if (xhr.status === 200) {
                                cc.log(JSON.parse(xhr.responseText).data);
                            }
                        };
                        xhr.open("POST", "http://8.129.91.11:801/api/upload/upload_file");
                        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                        xhr.send(sendData);
                        this.node.destroy();
                    }, 100);
                }
            });
        }
        else {
            cc.error("save image data failed!");
        }
    },



    _arrayBufferToBase64(bytes) {
        var base64 = '';
        var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
        var byteLength = bytes.byteLength;
        var byteRemainder = byteLength % 3;
        var mainLength = byteLength - byteRemainder;
        var a, b, c, d;
        var chunk;
        // Main loop deals with bytes in chunks of 3
        for (var i = 0; i < mainLength; i = i + 3) {
            // Combine the three bytes into a single integer
            chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
            // Use bitmasks to extract 6-bit segments from the triplet
            a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
            b = (chunk & 258048) >> 12; // 258048 = (2^6 - 1) << 12
            c = (chunk & 4032) >> 6; // 4032 = (2^6 - 1) << 6
            d = chunk & 63; // 63 = 2^6 - 1
            // Convert the raw binary segments to the appropriate ASCII encoding
            base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
        }
        // Deal with the remaining bytes and padding
        if (byteRemainder == 1) {
            chunk = bytes[mainLength];
            a = (chunk & 252) >> 2 // 252 = (2^6 - 1) << 2;
            // Set the 4 least significant bits to zero
            b = (chunk & 3) << 4 // 3 = 2^2 - 1;
            base64 += encodings[a] + encodings[b] + '==';
        }
        else if (byteRemainder == 2) {
            chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
            a = (chunk & 16128) >> 8 // 16128 = (2^6 - 1) << 8;
            b = (chunk & 1008) >> 4 // 1008 = (2^6 - 1) << 4;
            // Set the 2 least significant bits to zero
            c = (chunk & 15) << 2 // 15 = 2^4 - 1;
            base64 += encodings[a] + encodings[b] + encodings[c] + '=';
        }
        return "data:image/jpeg;base64," + base64;
        // return base64;
    },
});