zoutepopcorn/UPLOAD RES. PICTUER JS > NODE

## UPLOAD RES. PICTUER JS > NODE
TODO
make folder /html and /html/up
copy file socket.io-stream.js to html
run node app.js
   {}
()()()++
()()(+++

NODE
var express = require('express');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var ss = require('socket.io-stream');
var fs = require('fs');
var path = require('path');
server.listen(3000);
app.use(express.static(__dirname + '/html'));

io.on('connection', function (socket) {
  console.log("conn");
  ss(socket).on('file', function(stream, data) {
    console.log("stream");
    var unix = new Date().getTime();
    var ext = ".png";
    console.log("ext " + ext);
    stream.pipe(fs.createWriteStream(__dirname + "/html/up/" + unix + ext ));
  });
});


INDEX
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>aa</title>
</head>

<body>
    <script src="/socket.io/socket.io.js "></script>
    <script src="socket.io-stream.js "></script>
    <input type="file" value="C:\fakepath"><br/>
    <label>Original Image</label><br/>
    <br>
    <img id="image"><br/>

    <script type="text/javascript">
        var socket = io.connect();
        var input = document.getElementsByTagName('input')[0];

        input.onclick = function() {
            this.value = null;
        };

        input.onchange = function() {
            resizeMax(400, function(dat) {
                console.log(dat);
                document.getElementById("image").src = dat;
                //var file = input.files[0];
                //console.log(file);
                var file = toBlob(dat);
                var stream = ss.createStream();
                ss(socket).emit('file', stream, {
                    size: file.size,
                    name: file.name
                });
                ss.createBlobReadStream(file).pipe(stream);

            });
        };

        function toBlob(dataurl) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
                type: mime
            });
        }

        function resizeMax(max, cb) {
            var data;
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(event) {
                    var img = new Image();
                    img.onload = function() {
                        if (img.width > max || img.height > max) {
                            var oc = document.createElement('canvas'),
                                octx = oc.getContext('2d');
                            oc.width = img.width;
                            oc.height = img.height;
                            octx.drawImage(img, 0, 0);
                            if (img.width > img.height) {
                                oc.height = (img.height / img.width) * max;
                                oc.width = max;
                            } else {
                                oc.width = (img.width / img.height) * max;
                                oc.height = max;
                            }
                            octx.drawImage(oc, 0, 0, oc.width, oc.height);
                            octx.drawImage(img, 0, 0, oc.width, oc.height);
                            data = oc.toDataURL();
                        } else {
                            data = img.src;
                        }
                        cb(data);
                    };
                    img.src = event.target.result;
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
</body>

</html>
	TODO
	make folder /html and /html/up
	copy file socket.io-stream.js to html
	run node app.js
	{}
	()()()++
	()()(+++

	NODE
	var express = require('express');
	var app = express();
	var server = require('http').Server(app);
	var io = require('socket.io')(server);
	var ss = require('socket.io-stream');
	var fs = require('fs');
	var path = require('path');
	server.listen(3000);
	app.use(express.static(__dirname + '/html'));

	io.on('connection', function (socket) {
	console.log("conn");
	ss(socket).on('file', function(stream, data) {
	console.log("stream");
	var unix = new Date().getTime();
	var ext = ".png";
	console.log("ext " + ext);
	stream.pipe(fs.createWriteStream(__dirname + "/html/up/" + unix + ext ));
	});
	});



	INDEX
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>aa</title>
	</head>

	<body>
	<script src="/socket.io/socket.io.js "></script>
	<script src="socket.io-stream.js "></script>
	<input type="file" value="C:\fakepath"><br/>
	<label>Original Image</label><br/>
	<br>
	<img id="image"><br/>

	<script type="text/javascript">
	var socket = io.connect();
	var input = document.getElementsByTagName('input')[0];

	input.onclick = function() {
	this.value = null;
	};

	input.onchange = function() {
	resizeMax(400, function(dat) {
	console.log(dat);
	document.getElementById("image").src = dat;
	//var file = input.files[0];
	//console.log(file);
	var file = toBlob(dat);
	var stream = ss.createStream();
	ss(socket).emit('file', stream, {
	size: file.size,
	name: file.name
	});
	ss.createBlobReadStream(file).pipe(stream);

	});
	};

	function toBlob(dataurl) {
	var arr = dataurl.split(','),
	mime = arr[0].match(/:(.*?);/)[1],
	bstr = atob(arr[1]),
	n = bstr.length,
	u8arr = new Uint8Array(n);
	while (n--) {
	u8arr[n] = bstr.charCodeAt(n);
	}
	return new Blob([u8arr], {
	type: mime
	});
	}

	function resizeMax(max, cb) {
	var data;
	if (input.files && input.files[0]) {
	var reader = new FileReader();
	reader.onload = function(event) {
	var img = new Image();
	img.onload = function() {
	if (img.width > max \|\| img.height > max) {
	var oc = document.createElement('canvas'),
	octx = oc.getContext('2d');
	oc.width = img.width;
	oc.height = img.height;
	octx.drawImage(img, 0, 0);
	if (img.width > img.height) {
	oc.height = (img.height / img.width) * max;
	oc.width = max;
	} else {
	oc.width = (img.width / img.height) * max;
	oc.height = max;
	}
	octx.drawImage(oc, 0, 0, oc.width, oc.height);
	octx.drawImage(img, 0, 0, oc.width, oc.height);
	data = oc.toDataURL();
	} else {
	data = img.src;
	}
	cb(data);
	};
	img.src = event.target.result;
	};
	reader.readAsDataURL(input.files[0]);
	}
	}
	</script>
	</body>

	</html>