Jump to content

Taking a screenshot with a transparent background


freetoplay
 Share

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.

Link to comment
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']);
?>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...