mirror of https://github.com/SixLabors/ImageSharp
Anton Firszov
9 years ago
11 changed files with 288 additions and 19 deletions
@ -0,0 +1,89 @@ |
|||||
|
<!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> |
||||
Loading…
Reference in new issue