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

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.