mirror of https://github.com/SixLabors/ImageSharp
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
3.0 KiB
89 lines
3.0 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
</head>
|
|
|
|
<body>
|
|
<input type="file" id="files" />
|
|
<canvas id="canvas"></canvas>
|
|
<div id="output"></div>
|
|
<script src="jpg.js"></script>
|
|
<script>
|
|
(function (document) {
|
|
var input = document.getElementById("files"),
|
|
output = document.getElementById('output'),
|
|
canvas = document.getElementById("canvas"),
|
|
ctx = canvas.getContext('2d'),
|
|
fileData; // We need fileData to be visible to getBuffer.
|
|
|
|
// Eventhandler for file input.
|
|
function openfile(evt) {
|
|
var files = input.files;
|
|
// Pass the file to the blob, not the input[0].
|
|
fileData = new Blob([files[0]]);
|
|
// Pass getBuffer to promise.
|
|
var promise = new Promise(getBuffer);
|
|
// Wait for promise to be resolved, or log error.
|
|
promise.then(function (data) {
|
|
// Here you can pass the bytes to another function.
|
|
// output.innerHTML = data.toString();
|
|
// console.log(data);
|
|
|
|
var jpeg = new JpegImage();
|
|
jpeg.parse(data);
|
|
|
|
console.log(jpeg.width);
|
|
console.log(jpeg.height);
|
|
|
|
canvas.width = jpeg.width;
|
|
canvas.height = jpeg.height;
|
|
|
|
var d = jpeg.getData(jpeg.width, jpeg.height, true);
|
|
|
|
console.log(d.length);
|
|
|
|
var rgba = new Uint8Array(jpeg.width * jpeg.height * 4);
|
|
|
|
for(i = 0, j = 0; i < d.length; i += 3, j +=4){
|
|
rgba[j] = d[i];
|
|
rgba[j + 1] = d[i + 1];
|
|
rgba[j + 2] = d[i + 2];
|
|
rgba[j + 3] = 255;
|
|
}
|
|
|
|
var imageData = new ImageData(Uint8ClampedArray.from(rgba), jpeg.width, jpeg.height);
|
|
|
|
|
|
ctx.putImageData(imageData, 0 , 0);
|
|
// output.innerHTML = d.toString();
|
|
//console.log(new Date());
|
|
//console.log(d);
|
|
|
|
}).catch(function (err) {
|
|
console.log('Error: ', err);
|
|
});
|
|
}
|
|
|
|
/*
|
|
Create a function which will be passed to the promise
|
|
and resolve it when FileReader has finished loading the file.
|
|
*/
|
|
function getBuffer(resolve) {
|
|
var reader = new FileReader();
|
|
reader.readAsArrayBuffer(fileData);
|
|
reader.onload = function () {
|
|
var arrayBuffer = reader.result
|
|
var bytes = new Uint8Array(arrayBuffer);
|
|
resolve(bytes);
|
|
}
|
|
}
|
|
|
|
// Eventlistener for file input.
|
|
input.addEventListener('change', openfile, false);
|
|
}(document));
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|