cocos creator H5截图和下载的实现
2020-04-07 本文已影响0人
cmd_ts
typescript 2.3.2版本。
在web中可以下载,但是集成到app里的webview实现不了。
onLoad () {
if(cc.sys.isBrowser)
{
let node = new cc.Node();
node.parent = cc.director.getScene().getChildByName('Canvas');
let camera = node.addComponent(cc.Camera);
//设置相机参数
camera.enabled = false; // 避免自动渲染
// 截图的缩放比例
let zoom = 1;
let width = cc.winSize.width;
let height = cc.winSize.height;
let size = cc.size(width*zoom, height*zoom);
// 截图的中心点就是摄像机节点的位置
let origin = cc.v2(0, 0);
camera.zoomRatio = zoom; // 设置缩放
// 设置目标渲染纹理
let texture = new cc.RenderTexture();
texture.initWithSize(size.width, size.height); // 截图矩形的尺寸
this.node.setPosition(origin); // 截图矩形的中心点
camera.targetTexture = texture;
// 缓存,备用
this._camera = camera;
this._texture = texture;
//用于显示的sprite组件,如果要测试这个,需要添加sprite组件
this._sprite = this.getComponent<cc.Sprite>(cc.Sprite);
}
}
btn_image_knife(){
console.log('save');
// 执行一次 render,将所渲染的内容渲染到纹理上
this._camera.render(undefined);
// 到这里,截图就已经完成了
// 接下去,可以从 RenderTexture 中获取数据,进行深加工
let texture = this._texture;
let data = texture.readPixels();
let width = texture.width;
let height = texture.height;
// 接下来就可以对这些数据进行操作了
// let canvas:HTMLCanvasElement;
let canvas = document.createElement('canvas');
// document.body.appendChild(btn); // 没有添加到body上,不用担心内存泄漏
let ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
// 1维数组转2维
// 同时做个上下翻转
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);
}
let dataUrl = canvas.toDataURL("image/jpeg");
//把图片生成后download到本地
var href = dataUrl.replace(/^data:image[^;]*/, "data:image/octet-stream");
//document.location.href = href;
var a = document.createElement('a'); // 创建一个a节点插入的document
a.href = href;
a.download = 'asd.png';
a.click();
a.remove();
}