web端截图分享功能（包含部分节点下截图分享保存功能） - pxqwxl/myLearnPoject GitHub Wiki

截图功能：1.先创建一个空的屏幕大小的texture

2.设置相机的目标texutre为次空teutre 然后把当前相机下的节点渲染到此texture中

3 拿到textrue中的像素值（如果需要在某个节点下截图则将当前texture中的像素进行裁剪取到目标节点区域像素

4 创建一个2d画布 把texture中的像素值转成imageData，并设置到画布上 然后从画布中拿到该图片url链接

5 web端由于没有jsb 因此保存只能通过下载的方式 将拿到的url链接进行下载

相关代码：

• static fileDownload (downloadUrl, type, fileName) {

• let aLink = document.createElement('a');
  

• aLink.style.display = 'none';
  

• aLink.href = downloadUrl;
  

• aLink.download = fileName + "." + type;
  

• // 触发点击-然后移除
  

• document.body.appendChild(aLink);
  

• aLink.click();
  

• document.body.removeChild(aLink);
  

• }

• static screenShort(targetNode?){

• • let camera = cc.director.getScene().getComponentInChildren(cc.Camera);

• //创建新的texture
  

• let texture = new cc.RenderTexture();
  

• texture.initWithSize(cc.winSize.width, cc.winSize.height, (cc.game as any)._renderContext.STENCIL_INDEX8);
  

• //创建新的spriteFrame 
  

• let spriteFrame = new cc.SpriteFrame();
  

• camera.targetTexture = texture;
  

• camera.render();
  

• var data = null
  

• let nodeWidth = camera.targetTexture.width;;
  

• let nodeHeight = camera.targetTexture.height;
  

• if (targetNode == null) {
  

•     spriteFrame.setTexture(texture);
  

•     data = camera.targetTexture.readPixels();
  

• } else {
  

•     var target= targetNode.parent.convertToWorldSpaceAR(cc.v2(targetNode.x, targetNode.y));
  

•     console.log(targetNode.x, targetNode.y, "savexxxxx")
  

•     console.log(target.x, target.y,"save x y ")
  

•     let nodeX =  target.x - targetNode.width/2;
  

•     let nodeY =  target.y - targetNode.height/2;
  

•     nodeWidth = targetNode.width;
  

•     nodeHeight = targetNode.height;
  

•     //只显示node部分的图片
  

•     spriteFrame.setTexture(texture, new cc.Rect(nodeX, nodeY, nodeWidth, nodeHeight));
  

•     var tmp = new Uint8Array(nodeWidth * nodeHeight * 4)
  

•     data = camera.targetTexture.readPixels(tmp, nodeX, nodeY, nodeWidth, nodeHeight);
  

• }
  

• let width = nodeWidth
  

• let height = nodeHeight
  

• var _canvas = document.createElement("canvas")
  

• var ctx =_canvas.getContext("2d");
  

• _canvas.width = width
  

• _canvas.height = height
  

• let rowBytes = width * 4;
  

• for (let row = 0; row < height; row++) {
  

•   let srow = height - 1 - row;
  

•   let imageData = ctx.createImageData(width, 1);
  

•   let start = srow * width * 4;
  

•   for (let i = 0; i < rowBytes; i++) {
  

•     imageData.data[i] = data[start + i];
  

•   }
  

•   ctx.putImageData(imageData, 0, row);
  

• }
  

• var dataURL = _canvas.toDataURL("image/png");
  

• // UiTool.fileDownload(dataURL, "png", "aaa")
  

• console.log(dataURL,"dataUrl===")
  

• camera.targetTexture = null;
  

• }