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
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
?
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" >
<style>
body {
padding:0;
margin:0;
canvas {
display:block;
.screenshot_create {
cursor:pointer;
display:block;
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>
<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="";
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
//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);
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.
