Export part of scene like .bmp

The user loads an image from computer, that image becomes a plain texture. Then click to mark the upper left and lower right corners of the square want to export. Export should be in format .bmp.
Please help me to do this, I found nothing but a screen shot. Everything works well to the point of export.

It’s not clear to me what you want to do here. Can you add some more details or diagrams?

Please read this post for tips on writing good questions:

https://discourse.threejs.org/t/please-read-this-before-posting-a-question/24/3

1 Like

Capturing an image bounded by selection box is relatively easy to implement. Exporting data as bitmap not so easy.
Not all browsers support encoding in image/bmp. The good old FireFox can handle it but not Chrome.
Can you tell me, why you need it in bmf and can you do with png?

2 Likes

One solution to use bmp is send captured png to server, convert it to bmp and send to user.

1 Like

Please tell me more detail about capturing with selection box. Where I can see example. I will export png and convert in bpm

Thanks! I will do that @Chaser_Code

This code only send screenshot to server and crop image.
Bmp format is work on php 8 version or imagepick or custom server modules.
For screenshot we using preserveDrawingBuffer:true
index.html

<!DOCTYPE html>
<html lang="en" >
<head>
<style>
body {
padding:0;
margin:0;
}

canvas {
display:block;
}

.screenshot_create {
cursor:pointer;
display:block;
position:absolute;
top:0px;
left:50%;
width:100px;
margin-left:-50px;
text-align:center;
background:#ffffff;
}
</style>
<script type="text/javascript" src="https://rawgit.com/mrdoob/three.js/r73/build/three.min.js"></script>
</head>
<body>
<span class="screenshot_create" onclick="screenshot_create();">Screenshot</span>
<script>


var renderer=new THREE.WebGLRenderer({antialias:true,preserveDrawingBuffer:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);


var camera=new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,1,1000);
camera.position.z=10;


var scene=new THREE.Scene();
var mesh=[];
var color=new THREE.Color(0xffffff);


for(var n=0;100>n;n++){
color.setHex(Math.random()*0xffffff);
var material=new THREE.MeshPhongMaterial({color:color});
var geometry=new THREE.BoxGeometry(2,2,2);
mesh["box_"+n]=new THREE.Mesh(geometry,material);
mesh["box_"+n].position.set(Math.random()*30-15,Math.random()*20-10,0);
mesh["box_"+n].rotation.x+=Math.random();
mesh["box_"+n].rotation.y+=Math.random();
scene.add(mesh["box_"+n]);
}


var ambient=new THREE.AmbientLight(0x404040);
scene.add(ambient);


var sun=new THREE.DirectionalLight(0xffffff);
sun.position.set(1,1,1).normalize();
scene.add(sun);


var screenshot_ajax=new XMLHttpRequest();


function screenshot_create(){


var screenshot_data=renderer.domElement.toDataURL("image/png");
screenshot_ajax.onreadystatechange=function(){
if(screenshot_ajax.readyState==4){
if(screenshot_ajax.status==200){
var a=document.createElement("a");
document.body.appendChild(a);
a.style="display:none";
var url=window.URL.createObjectURL(screenshot_ajax.response);
a.href=url;
a.download="image.bmp";
a.click();
window.URL.revokeObjectURL(url);
}
}
}


screenshot_ajax.open("POST","screenshot_create.php",true);
screenshot_ajax.responseType="blob";
screenshot_ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
screenshot_ajax.send("screenshot_data="+screenshot_data);


}


function animate() {
requestAnimationFrame(animate);
renderer.render(scene,camera);
}


animate();


</script>
</body>
</html>

screenshot_create.php

<?php


//error_reporting(0);


$crop_x=100;
$crop_y=100;
$crop_width=400;
$crop_height=400;


if(empty($_POST["screenshot_data"])){ exit; }


$screenshot_data=$_POST["screenshot_data"];


$s=getimagesize($screenshot_data);
if(empty($s) || $s[2]!=3){ exit; } // NO PNG


$screenshot_data=str_replace('data:image/png;base64,','',$screenshot_data);
$screenshot_data=str_replace(' ','+',$screenshot_data);
$screenshot_data=base64_decode($screenshot_data);
$p=imagecreatefromstring($screenshot_data);
$d=imagecreatetruecolor($crop_width,$crop_height);
imagecopyresampled($d,$p,0,0,$crop_x,$crop_y,$crop_width,$crop_height,$crop_width,$crop_height);


header("Cache-Control:public");
header("Content-Description:file transfer");
header("Content-Disposition:attachment;filename=image.bmp");
header("Content-Transfer-Encoding:binary");
header("Content-Type:binary/octet-stream");


//imagepng($d);
imagebmp($d);
imagedestroy($p);
imagedestroy($d);
?>
2 Likes

Thank you so much!! Everything is perfect!!

I see you found the answer that were looking for, so you don’t need my help here.
Just wanted to let you know changing file extension doesn’t alter its content.

Second solution without server is only if you know javascript good.
You need put screenshot to another canvas which is canvas.getContext("2d"); get pixels and convert them to bmp by this Export to PNG/JPEG/BMP: It can be done in PURE JavaScript!!! - Highcharts official support forum
and then just send bmp to user maybe via blob.