/
Image2DToPixblock.html
105 lines (78 loc) · 2.98 KB
/
Image2DToPixblock.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<html>
<head>
<title>Generic Image2D</title>
<script src="../dist/pixpipe.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1><a href="https://github.com/Pixpipe/pixpipejs"><span style="color: #ff91d7">Pixpipe</span><span style="color: #FFFFFF">js</span></a></h1>
<p>
This does the following :
<ul>
<li>open a local Jpeg file, using <code>pixpipe.FileToArrayBufferReader</code></li>
<li>redirect the file buffer into a <code>pixpipe.Image2DGenericDecoder</code></li>
<li>get the output as a generic <code>pixpipe.Image2D</code> object</li>
<li>display the image using <code>pixpipe.CanvasImageWriter</code></li>
</ul>
</p>
<div>
Select an file:
<input type="file" id="fileInput">
<br>
<span id="fileInfo"></span>
</div>
<div id="myDiv"></div>
<script>
window.onload = function() {
var fileInput = document.getElementById('fileInput');
// The filter to read image from URL
var file2Buff = new pixpipe.FileToArrayBufferReader();
// the image is loaded...
// here, this = url2ImgFilter
file2Buff.on("ready", function(){
var filenames = this.getMetadata("filenames");
var buff = this.getOutput();
var decoder = new pixpipe.Image2DGenericDecoder();
decoder.addInput( buff );
decoder.update();
if( decoder.getNumberOfOutputs() ){
var img = decoder.getOutput();
// encoding...
var blockEncoder = new pixpipe.PixBlockEncoder();
blockEncoder.setMetadata( "compress", true );
blockEncoder.addInput( img );
blockEncoder.update();
var encodedBlock = blockEncoder.getOutput();
console.log( "pixBlock byte length: " + encodedBlock.byteLength );
// decoding...
var blockDecoder = new pixpipe.PixBlockDecoder();
blockDecoder.addInput( encodedBlock )
blockDecoder.update();
var decodedImage = blockDecoder.getOutput();
// create a filter to write the image into a canvas
var imageToCanvasFilter = new pixpipe.CanvasImageWriter( );
imageToCanvasFilter.setMetadata( "parentDivID", "myDiv" );
imageToCanvasFilter.addInput( decodedImage );
imageToCanvasFilter.update();
}else{
alert("This file format is not compatible. Only Tiff, PNG and JPEG.")
}
});
// event listener of the file input
fileInput.addEventListener('change', function(e) {
var files = e.target.files;
var filenames = {};
for(var i=0; i<files.length; i++){
// set the input, an HTML5 File object and a category (ID)
file2Buff.addInput(files[i], i);
filenames[i] = files[i].name ;
}
file2Buff.setMetadata("filenames", filenames);
// Perform the reading + conversion ibto ArrayBuffer
file2Buff.update();
});
}
</script>
</body>
</html>