freetoplay

Taking a screenshot with a transparent background

Recommended Posts

@freetoplay using a regular browser pre-multiplies the canvas alpha value, so alpha of 0 wouldn't work.  You can kind of get something to work by setting the background scene alpha color to 0.1: http://playground.babylonjs.com/#96MDYB though this could be problematic if your mesh has alpha values.  

To get true transparency you would probably want to try using PHP as @Dad72 mentioned.

Share this post


Link to post
Share on other sites

Here's how I do in PHP to create thumbnails with a transparent background by replacing the color of the canvas with transparency.

<?php 
header('Content-Type: image/png');
function saveImg($img, $finalDir, $nameImage) {	
	$_img = str_replace('data:image/png;base64,', '', $img);
	$_img = str_replace(' ', '+', $_img);
	$data = base64_decode($_img);
	$file = "../../".$finalDir.$nameImage.'.png'; // Root image
	file_put_contents($file, $data);	
	$image = imagecreatefrompng($file);		
	imagealphablending($image, false);	
	for($x = imagesx($image); $x--;) {
		for($y = imagesy($image); $y--;) {
			$rgb = imagecolorat($image, $x, $y);
			$c = imagecolorsforindex($image, $rgb);
			if($c['red'] == 99 && $c['green'] == 148 && $c['blue'] == 237) { // Cornfloweblue colors (background of canvas)			
				$colorB = imagecolorallocatealpha($image, 0, 0, 0, 127);				
				imagesetpixel($image, $x, $y, $colorB);			
			}
		}
	}
	imagealphablending($image, false);	
	imagesavealpha($image, true);
	imagepng($image, $file, 1);	
}
	
saveImg($_POST['imgbase64'], $_POST['root'], $_POST['nameImage']);
?>

 

Share this post


Link to post
Share on other sites

@freetoplay I stand corrected!  @MarianG 's playground shows how you can take a snapshot with alpha set to 0 and download the image from the browser.  Note you will have to use "BABYLON.Tools.CreateScreenshotUsingRenderTarget" instead of "BABYLON.Tools.CreateScreenshot".  

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.