erp5_document_scanner: Extend code to try fix orientation
Showing
/*jslint indent: 2, unparam: true */ | ||
/*global rJS, RSVP, window, document, navigator, Cropper, Promise, JSON, jIO, promiseEventListener, domsugar, createImageBitmap, FormData, Caman*/ | ||
(function (rJS, RSVP, window, document, navigator, Cropper, Promise, JSON, jIO, promiseEventListener, domsugar, createImageBitmap, FormData, caman) { | ||
/*global rJS, RSVP, window, document, navigator, Cropper, Promise, JSON, jIO, promiseEventListener, domsugar, createImageBitmap, FormData, Caman, FileReader, DataView*/ | ||
(function (rJS, RSVP, window, document, navigator, Cropper, Promise, JSON, jIO, promiseEventListener, domsugar, createImageBitmap, FormData, caman, FileReader, DataView) { | ||
"use strict"; | ||
////////////////////////////////////////////////// | ||
... | ... | @@ -17,6 +17,58 @@ |
}); | ||
} | ||
function getOrientation(blob, callback) { | ||
var fr = new FileReader(); | ||
return new RSVP.Promise(function waitFormDataURLRead(resolve, reject) { | ||
Please
register
or
sign in
to reply
|
||
fr.addEventListener("load", function handleDataURLRead(evt) { | ||
var view = new DataView(evt.target.result), | ||
length = view.byteLength, | ||
offset = 2, | ||
marker, | ||
little, | ||
tags, | ||
i; | ||
if (view.getUint16(0, false) !== 0xFFD8) { | ||
return resolve(-2); | ||
} | ||
while (offset < length) { | ||
if (view.getUint16(offset + 2, false) <= 8) { | ||
return resolve(-1); | ||
} | ||
marker = view.getUint16(offset, false); | ||
offset += 2; | ||
if (marker === 0xFFE1) { | ||
offset += 2; | ||
if (view.getUint32(offset, false) !== 0x45786966) { | ||
return resolve(-1); | ||
} | ||
offset += 6; | ||
little = view.getUint16(offset, false) === 0x4949; | ||
offset += view.getUint32(offset + 4, little); | ||
tags = view.getUint16(offset, little); | ||
offset += 2; | ||
for (i = 0; i < tags; i = i + 1) { | ||
if (view.getUint16(offset + (i * 12), little) === 0x0112) { | ||
return resolve(view.getUint16(offset + (i * 12) + 8, little)); | ||
} | ||
} | ||
continue; | ||
} else if ((marker & 0xFF00) !== 0xFF00) { | ||
break; | ||
} | ||
offset += view.getUint16(offset, false); | ||
} | ||
return resolve(-1); | ||
}); | ||
fr.addEventListener("error", reject); | ||
fr.readAsArrayBuffer(blob); | ||
}, function cancelReadBlobAsDataURL() { | ||
fr.abort(); | ||
}); | ||
} | ||
function handleUserMedia(device_id, callback) { | ||
// Do not modify this function! | ||
// There is no need to add the gadget logic inside | ||
... | ... | @@ -105,8 +157,9 @@ |
scalable: false, | ||
// By default rotatable is true, if you remove it. | ||
// Make sure, it is set on data. | ||
rotatable: false, | ||
rotatable: true, | ||
zoomable: false, | ||
checkOrientation: true, | ||
movable: false, | ||
data: data, | ||
ready: function () { | ||
... | ... | @@ -349,6 +402,7 @@ |
image_capture = new window.ImageCapture( | ||
gadget.element.querySelector('video').srcObject.getVideoTracks()[0] | ||
), | ||
photo_blob, | ||
div; | ||
return new RSVP.Queue() | ||
... | ... | @@ -361,22 +415,64 @@ |
return image_capture.takePhoto({imageWidth: capabilities.imageWidth.max}); | ||
}) | ||
.push(function (blob) { | ||
photo_blob = blob; | ||
return jIO.util.readBlobAsDataURL(blob); | ||
}) | ||
.push(function (result) { | ||
var img = domsugar("img", {"src": result.target.result}); | ||
gadget.detached_promise_dict.media_stream.cancel('Not needed anymore, as captured'); | ||
div = gadget.element.querySelector(".camera-input"); | ||
div.replaceChild(img, div.firstElementChild); | ||
return RSVP.all([ | ||
createImageBitmap(blob), | ||
jIO.util.readBlobAsDataURL(blob) | ||
createImageBitmap(photo_blob), | ||
getOrientation(photo_blob) | ||
]); | ||
}) | ||
.push(function (result_list) { | ||
var bitmap = result_list[0], | ||
img = domsugar("img", {"src": result_list[1].target.result}), | ||
canvas = domsugar('canvas', {'class': 'canvas'}); | ||
orientation = result_list[1], | ||
height = bitmap.height, | ||
width = bitmap.width, | ||
canvas = domsugar('canvas', {'class': 'canvas'}), | ||
ctx; | ||
if (4 < orientation && orientation < 9) { | ||
canvas.width = height; | ||
canvas.height = width; | ||
} else { | ||
canvas.width = width; | ||
canvas.height = height; | ||
} | ||
div = gadget.element.querySelector(".camera-input"); | ||
gadget.detached_promise_dict.media_stream.cancel('Not needed anymore, as captured'); | ||
div.replaceChild(img, div.firstElementChild); | ||
canvas.width = bitmap.width; | ||
canvas.height = bitmap.height; | ||
canvas.getContext('2d').drawImage(bitmap, 0, 0); | ||
ctx = canvas.getContext('2d'); | ||
// transform context before drawing image | ||
switch (orientation) { | ||
case 2: | ||
ctx.transform(-1, 0, 0, 1, width, 0); | ||
break; | ||
case 3: | ||
ctx.transform(-1, 0, 0, -1, width, height); | ||
break; | ||
case 4: | ||
ctx.transform(1, 0, 0, -1, 0, height); | ||
break; | ||
case 5: | ||
ctx.transform(0, 1, 1, 0, 0, 0); | ||
break; | ||
case 6: | ||
ctx.transform(0, 1, -1, 0, height, 0); | ||
break; | ||
case 7: | ||
ctx.transform(0, -1, -1, 0, height, width); | ||
break; | ||
case 8: | ||
ctx.transform(0, -1, 1, 0, 0, width); | ||
break; | ||
default: | ||
break; | ||
} | ||
ctx.drawImage(bitmap, 0, 0); | ||
if (settings.brightness || settings.contrast || settings.enable_greyscale || settings.compression) { | ||
return handleCaman(canvas, settings); | ||
} | ||
... | ... | @@ -391,7 +487,10 @@ |
new Promise(function (resolve) { | ||
resolve(canvas.toDataURL("image/jpeg", compression)); | ||
}), | ||
buildPreviousThumbnailDom(gadget) | ||
buildPreviousThumbnailDom(gadget), | ||
new Promise(function (resolve) { | ||
|
||
canvas.toBlob(resolve, "image/jpeg", compression); | ||
}) | ||
]); | ||
}) | ||
.push(function (result_list) { | ||
... | ... | @@ -783,4 +882,4 @@ |
.declareAcquiredMethod("getTranslationList", "getTranslationList"); | ||
}(rJS, RSVP, window, document, navigator, Cropper, Promise, JSON, jIO, promiseEventListener, domsugar, createImageBitmap, FormData, Caman)); | ||
\ No newline at end of file | ||
}(rJS, RSVP, window, document, navigator, Cropper, Promise, JSON, jIO, promiseEventListener, domsugar, createImageBitmap, FormData, Caman, FileReader, DataView)); | ||
\ No newline at end of file |