微信分享缩略图终极解决方案

用anysdk做微信分享,遇到一个头疼的事。首先是截图,官方没有提供一个这样的插件,找了半天,截图是可以截了。ios中还必须自己提供缩略图,找了半天也没找到生成缩略图的api。后来自己写了一个截图并生成缩略图的插件,分享给大家。
主要原理:首先截全屏,然后新建一个节点,将截图的图片放入节点中,缩放到适当的位置,并放到左上角,然后再次截图,最后删除节点。
插件代码如下:
export default class ScreenShot {

x: number = 0;

y: number = 0;

width: number = 100;

height: number = 100;

hasMask: boolean = false;

targetWidth: number = 100;

targetHeight: number = 100;

renderTexture = null;

/**
 * 设置截屏区域
 * @param x 
 * @param y 
 * @param width 
 * @param height 
 */
setRect(x: number, y: number, width: number, height: number) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
}

/**
 * 通过节点设置截屏区域
 * @param node
 */
setRectFromNode(node: cc.Node) {
    var ox = - node.width * node.anchorX;
    var oy = - node.height * node.anchorY;
    var ex = + node.width * node.anchorX;
    var ey = + node.height * node.anchorY;
    var op = node.convertToWorldSpaceAR(new cc.Vec2(ox, oy));
    var ep = node.convertToWorldSpaceAR(new cc.Vec2(ex, ey));
    this.x = op.x;
    this.y = op.y;
    this.width = ep.x - op.x;
    this.height = ep.y - op.y;
}

/**
 * 设置截屏后保存的尺寸
 * @param width 
 * @param height 
 */
setSize(width: number, height: number) {
    this.targetWidth = width;
    this.targetHeight = height;
}

shot() {
    var scene = cc.director.getScene();
    var canvas = cc.find("/Canvas");
    var rt = this.createRenderTexture(canvas.width, canvas.height);
    rt.begin();
    cc.director.getRunningScene().visit();
    rt.end();
    var scaleX = this.targetWidth / this.width;
    var scaleY = this.targetHeight / this.height;
    var node = new cc.Node();
    node.width = canvas.width;
    node.height = canvas.height;
    node.scaleX = scaleX;
    node.scaleY = scaleY;
    node.x = (node.width / 2 - this.x) * scaleX;
    node.y = (node.height / 2 - this.y) * scaleY;
    node._sgNode.addChild(rt);
    cc.director.getScene().addChild(node);
    
    this.renderTexture = this.createRenderTexture(this.targetWidth, this.targetHeight);
    this.renderTexture.begin();
    cc.director.getRunningScene().visit();
    this.renderTexture.end();
    node.destroy();
}

saveToFile(path: string, format: cc.ImageFormat, callback: Function) {
    if (null == this.renderTexture) {
        throw new Error("请先截图!");
    }
    this.renderTexture.saveToFile(path, format, true, callback);
}

private createRenderTexture(width, height) {
    if (this.hasMask) {
        return cc.RenderTexture.create(width, height, cc.Texture2D.PIXEL_FORMAT_RGBA8888, gl.DEPTH24_STENCIL8_OES);
    } else {
        return cc.RenderTexture.create(width, height);
    }
}

}
直接可以使用,我是用ts写的,用js的同学自己想办法。
调用方式如下:
var ss = new ScreenShot();
ss.setRect(100, 100, 200, 200);
ss.setSize(64, 64);
ss.shot();
ss.saveToFile(“image.png”, cc.ImageFormat.JPG, function(){
cc.log(“success”);
});

5赞

有js版本吗。

你js删了所有的定义类型不就能用了么

大佬这个例子是在哪个版本上用的?我现在用最新的2.0发现cc.RenderTexture不存在,很难受啊,新版本用了camera,但是完全搞不明白