无聊逛论坛，看到很多朋友问webgl下如何分享图片呢？
用cocos2d-js实现了下
var listener = cc.eventManager.addListener({
event: cc.EventListener.CUSTOM,
eventName: cc.Director.EVENT_AFTER_DRAW ,
callback: function (event) {
function grab(x, y, width, height) {
var arrayBuffer = new Uint8Array(width * height * 4);
cc.game._renderContext.readPixels(x, y, width, height, cc.game._renderContext.RGBA, cc.game._renderContext.UNSIGNED_BYTE, arrayBuffer);
var clampArray = new Uint8ClampedArray(arrayBuffer, 0, arrayBuffer.length);
var imageData = new ImageData(clampArray, width, height);
var tempCanvas = document.createElement('canvas');
tempCanvas.getContext('2d').putImageData(imageData, 0, 0);
console.log(tempCanvas.toDataURL());
}
//grab(0, 0, cc.game._renderContext.drawingBufferWidth, cc.game._renderContext.drawingBufferHeight);
grab(20, 350, 100, 100);
cc.eventManager.removeListener(listener);
listener = undefined;
}
}, this.getRootNode());
要注意一点：一定要在这个事件触发时截图cc.Director.EVENT_AFTER_DRAW ，否则执行代码的时候，整个framebuffer已经被清空了，截取的图片是黑色的。
如果只截取当前屏幕，直接拿document.getElementByID(“GameCanvas”).toDataUrl()
2.分享静态贴图？
texture2d 取到对应的HtmlImageElement
新建一个新的canvas, 然后canvas.getContext(‘2d’).drawImage(HtmlImageElement, x, y, w, h);
canvas…toDataUrl()
这个如果是合图的美术资源，这里需要先根据SpriteFrame计算下贴图的位置，偏移值，旋转。减少复杂度，这类图片不合图。
-
分享屏幕局部的图片？
canvas渲染：拿到GameCanvas，GameCanvas.getContext(“2d”).getImageData(x, y, width, height); x,y为屏幕坐标，宽高是要截取部分的宽高。然后创建一个新的canvas，将ImageData放到新的canvas绘制，这个新的canvas.toDataURL()导出base64 -
如果做人物快照，只想分享avatar？
和webgl截图一样，只不过是渲染到rendertexture上，然后读取像素值，再绘制到canvas上导出base64
native上已经有实现的接口，可以直接用
