brane7
#1
var renderScreen = new cc.RenderTexture(cc.winSize.width, cc.winSize.height, cc.Texture2D.PIXEL_FORMAT_RGBA8888);
renderScreen.setVirtualViewport(cc.p(0, 0), cc.rect(0, 0, cc.winSize.width, cc.winSize.height), cc.rect(0, 0, cc.winSize.width, cc.winSize.height))
renderScreen.setAutoDraw(true);
renderScreen.beginWithClear(255, 255, 255, 0, 0, 0);
cc.director.getRunningScene().visit();
renderScreen.end();
var iconSprite = this.node.getComponent(cc.Sprite);
iconSprite.spriteFrame = new cc.SpriteFrame();
iconSprite.spriteFrame.setTexture(renderScreen.getSprite().texture);
is success but i want save to local image…
and how update to server?
brane7
#2
captureCanvas: function (_x, _y, _width, _height) {
/* image/png.
var fullQuality = canvas.toDataURL('image/jpeg', 1.0);
var mediumQuality = canvas.toDataURL('image/jpeg', 0.5);
var lowQuality = canvas.toDataURL('image/jpeg', 0.1);
*/
var callback = () => {
//canvas 캡쳐
//this._imageHtmlElemental.src = cc._canvas.toDataURL()
//cc.log(cc._canvas.toDataURL());
//1. canvas elemental base64 데이터 get
var imageData = cc._canvas.toDataURL();
//2. 2d canvas 만들기
var captureCanvas = document.createElement("canvas");
captureCanvas.id = 'captureCanvas';
captureCanvas.width = cc.winSize.width;
captureCanvas.height = cc.winSize.height;
var captureCanvasCtx = captureCanvas.getContext("2d");
//2.5 이미지 만들기
var image = new Image();
image.src = imageData;
image.onload = () => {
//3. 2d canvas에 이미지 붙이기
captureCanvasCtx.drawImage(image, 0, 0, cc.winSize.width, cc.winSize.height);
//4. 2d canvas에서 오려올 데이터 만들기
var cropImageData = captureCanvasCtx.getImageData((cc.winSize.width/2)-(_width/2)+_x, (cc.winSize.height/2)-(_height/2)+_y, _width, _height);
//5. 오려진 데이터 사이즈만큼의 canvas만들기
var cropCanvas = document.createElement("canvas");
cropCanvas.id = 'cropCanvas';
cropCanvas.width = _width;
cropCanvas.height = _height;
//6. 오려진 데이터를 오려진 canvas에 그리기
var cropCanvasCtx = cropCanvas.getContext("2d");
cropCanvasCtx.rect(0, 0, _width, _height);
cropCanvasCtx.fillStyle = 'white';
cropCanvasCtx.fill();
cropCanvasCtx.putImageData(cropImageData, 0, 0);
//7. 잘려진 이미지 데이터
var cropCanvasBase64Data = cropCanvas.toDataURL();
// cc.log(cropCanvasBase64Data);
this._imageHtmlElemental.src = cropCanvasBase64Data;
cropCanvas = null;
captureCanvas = null;
};
}
//draw 이벤트 발생후 toDataURL을 해주어야 데이터를 받을수 있다
cc.director.once(cc.Director.EVENT_AFTER_DRAW, callback);
},
jrosich
#3
Did you found out how to do it?
You’d have to modify the engine for capturing the canvas like that.
'preserveDrawingBuffer': true
in cocos2d/core/CCGame.js
1 Like