Skip to content

E
elphel-web-393
Commit b7d797ad authored by Oleg Dzhimiev's avatar Oleg Dzhimiev
Browse files
Options

revisited jquery-jp4 - optimized exif reading (don't need findIPTCinJPEG), simplified image loading

parent 979e470b
Hide whitespace changes
Inline Side-by-side
Showing with 325 additions and 422 deletions
src/jp4-canvas/elphel.js
View file @ b7d797ad
......@@ -129,13 +129,13 @@ var Elphel = {
* @lowres - valid values: 1 (not scaled), 2, 4, 8 (lowest resolution)
*
*/
reorderBlocksJP4_lowres: function(pixels,width,height,format="JP4",mosaic=[["Gr","R"],["B" ,"Gb"]],lowres){
//reorderBlocksJP4_lowres: function(pixels,width,height,format="JP4",mosaic=[["Gr","R"],["B" ,"Gb"]],lowres){
reorderBlocksJP4_lowres: async function(pixels,width,height,format="JP4",mosaic=[["Gr","R"],["B" ,"Gb"]],lowres){
// the output image is 1/4 because demosaicing = 4 single color channel pixels are put into 1 rgb pixel
var oPixels = new Uint8Array(pixels.length/4);
// check
if ((lowres!=1)&&(lowres!=2)&&(lowres!=4)&&(lowres!=8)){
if (![1,2,4,8].includes(lowres)){
lowres = 4;
}
......@@ -692,4 +692,4 @@ var Elphel = {
console.log("Test message from elphel.js: ok");
}
}
\ No newline at end of file
}
src/jp4-canvas/jp4-canvas.html
View file @ b7d797ad
......@@ -7,12 +7,12 @@
<body>
<table>
<tr>
<td><div id='test1'></div></td>
<td><div id='test2'></div></td>
<td valign='top'><div id='test1'></div></td>
<td valign='top'><div id='test2'></div></td>
</tr>
<tr>
<td><div id='test3'></div></td>
<td><div id='test4'></div></td>
<td valign='top'><div id='test3'></div></td>
<td valign='top'><div id='test4'></div></td>
</tr>
</table>
<script src="js/elphel.js"></script>
......
src/jp4-canvas/jp4-canvas.js
View file @ b7d797ad
......@@ -26,10 +26,10 @@
*/
$(function(){
var t1 = $("#test1").jp4({ip:location.host, port:2323,width:600,fast:true,lowres:4});
var t2 = $("#test2").jp4({ip:location.host, port:2324,width:600,fast:true,lowres:4});
var t3 = $("#test3").jp4({ip:location.host, port:2325,width:600,fast:true,lowres:4});
var t4 = $("#test4").jp4({ip:location.host, port:2326,width:600,fast:true,lowres:4});
let t1 = $("#test1").jp4({src:"http://"+location.host+":"+2323+"/img",width:600,fast:true,lowres:4,debug:false,refresh:false});
let t2 = $("#test2").jp4({src:"http://"+location.host+":"+2324+"/img",width:600,fast:true,lowres:4,debug:false,refresh:false});
let t3 = $("#test3").jp4({src:"http://"+location.host+":"+2325+"/img",width:600,fast:true,lowres:4,debug:false,refresh:false});
let t4 = $("#test4").jp4({src:"http://"+location.host+":"+2326+"/img",width:600,fast:true,lowres:4,debug:false,refresh:false});
});
src/jp4-canvas/jquery-jp4.js
View file @ b7d797ad
......@@ -27,235 +27,205 @@
(function ( $ ) {
//https://gist.github.com/leolux/c794fc63d9c362013448
var JP4 = function(element,options){
var elem = $(element);
var obj = this;
var settings = $.extend({
ip: "",
port: "",
image: "test.jp4",
fromhtmlinput: false,
refresh: false,
mosaic: [["Gr","R"],["B" ,"Gb"]],
fast: false,
precise: false,
lowres: 0, // valid values: 1,2,4,8. 0 to disable
width: 600,
channel: "all",
diff: false,
chn1: "red",
chn2: "green",
ndvi: false,
webworker_path: "js",
debug: false,
callback: function(){
console.log("callback");
}
},options);
var DEBUG = settings.debug;
// working time
var T0;
var TX;
var BAYER = settings.mosaic;
var FLIPV = 0;
var FLIPH = 0;
var IMAGE_FORMAT = "JPEG";
var SATURATION = [0,0,0,0];
var PIXELS = [];
// https://stackoverflow.com/questions/28495390/thermal-imaging-palette
var iron_palette = ["#00000a","#000014","#00001e","#000025","#00002a","#00002e","#000032","#000036",
"#00003a","#00003e","#000042","#000046","#00004a","#00004f","#000052","#010055",
"#010057","#020059","#02005c","#03005e","#040061","#040063","#050065","#060067",
"#070069","#08006b","#09006e","#0a0070","#0b0073","#0c0074","#0d0075","#0d0076",
"#0e0077","#100078","#120079","#13007b","#15007c","#17007d","#19007e","#1b0080",
"#1c0081","#1e0083","#200084","#220085","#240086","#260087","#280089","#2a0089",
"#2c008a","#2e008b","#30008c","#32008d","#34008e","#36008e","#38008f","#390090",
"#3b0091","#3c0092","#3e0093","#3f0093","#410094","#420095","#440095","#450096",
"#470096","#490096","#4a0096","#4c0097","#4e0097","#4f0097","#510097","#520098",
"#540098","#560098","#580099","#5a0099","#5c0099","#5d009a","#5f009a","#61009b",
"#63009b","#64009b","#66009b","#68009b","#6a009b","#6c009c","#6d009c","#6f009c",
"#70009c","#71009d","#73009d","#75009d","#77009d","#78009d","#7a009d","#7c009d",
"#7e009d","#7f009d","#81009d","#83009d","#84009d","#86009d","#87009d","#89009d",
"#8a009d","#8b009d","#8d009d","#8f009c","#91009c","#93009c","#95009c","#96009b",
"#98009b","#99009b","#9b009b","#9c009b","#9d009b","#9f009b","#a0009b","#a2009b",
"#a3009b","#a4009b","#a6009a","#a7009a","#a8009a","#a90099","#aa0099","#ab0099",
"#ad0099","#ae0198","#af0198","#b00198","#b00198","#b10197","#b20197","#b30196",
"#b40296","#b50295","#b60295","#b70395","#b80395","#b90495","#ba0495","#ba0494",
"#bb0593","#bc0593","#bd0593","#be0692","#bf0692","#bf0692","#c00791","#c00791",
"#c10890","#c10990","#c20a8f","#c30a8e","#c30b8e","#c40c8d","#c50c8c","#c60d8b",
"#c60e8a","#c70f89","#c81088","#c91187","#ca1286","#ca1385","#cb1385","#cb1484",
"#cc1582","#cd1681","#ce1780","#ce187e","#cf187c","#cf197b","#d01a79","#d11b78",
"#d11c76","#d21c75","#d21d74","#d31e72","#d32071","#d4216f","#d4226e","#d5236b",
"#d52469","#d62567","#d72665","#d82764","#d82862","#d92a60","#da2b5e","#da2c5c",
"#db2e5a","#db2f57","#dc2f54","#dd3051","#dd314e","#de324a","#de3347","#df3444",
"#df3541","#df363d","#e0373a","#e03837","#e03933","#e13a30","#e23b2d","#e23c2a",
"#e33d26","#e33e23","#e43f20","#e4411d","#e4421c","#e5431b","#e54419","#e54518",
"#e64616","#e74715","#e74814","#e74913","#e84a12","#e84c10","#e84c0f","#e94d0e",
"#e94d0d","#ea4e0c","#ea4f0c","#eb500b","#eb510a","#eb520a","#eb5309","#ec5409",
"#ec5608","#ec5708","#ec5808","#ed5907","#ed5a07","#ed5b06","#ee5c06","#ee5c05",
"#ee5d05","#ee5e05","#ef5f04","#ef6004","#ef6104","#ef6204","#f06303","#f06403",
"#f06503","#f16603","#f16603","#f16703","#f16803","#f16902","#f16a02","#f16b02",
"#f16b02","#f26c01","#f26d01","#f26e01","#f36f01","#f37001","#f37101","#f37201",
"#f47300","#f47400","#f47500","#f47600","#f47700","#f47800","#f47a00","#f57b00",
"#f57c00","#f57e00","#f57f00","#f68000","#f68100","#f68200","#f78300","#f78400",
"#f78500","#f78600","#f88700","#f88800","#f88800","#f88900","#f88a00","#f88b00",
"#f88c00","#f98d00","#f98d00","#f98e00","#f98f00","#f99000","#f99100","#f99200",
"#f99300","#fa9400","#fa9500","#fa9600","#fb9800","#fb9900","#fb9a00","#fb9c00",
"#fc9d00","#fc9f00","#fca000","#fca100","#fda200","#fda300","#fda400","#fda600",
"#fda700","#fda800","#fdaa00","#fdab00","#fdac00","#fdad00","#fdae00","#feaf00",
"#feb000","#feb100","#feb200","#feb300","#feb400","#feb500","#feb600","#feb800",
"#feb900","#feb900","#feba00","#febb00","#febc00","#febd00","#febe00","#fec000",
"#fec100","#fec200","#fec300","#fec400","#fec500","#fec600","#fec700","#fec800",
"#fec901","#feca01","#feca01","#fecb01","#fecc02","#fecd02","#fece03","#fecf04",
"#fecf04","#fed005","#fed106","#fed308","#fed409","#fed50a","#fed60a","#fed70b",
"#fed80c","#fed90d","#ffda0e","#ffda0e","#ffdb10","#ffdc12","#ffdc14","#ffdd16",
"#ffde19","#ffde1b","#ffdf1e","#ffe020","#ffe122","#ffe224","#ffe226","#ffe328",
"#ffe42b","#ffe42e","#ffe531","#ffe635","#ffe638","#ffe73c","#ffe83f","#ffe943",
"#ffea46","#ffeb49","#ffeb4d","#ffec50","#ffed54","#ffee57","#ffee5b","#ffee5f",
"#ffef63","#ffef67","#fff06a","#fff06e","#fff172","#fff177","#fff17b","#fff280",
"#fff285","#fff28a","#fff38e","#fff492","#fff496","#fff49a","#fff59e","#fff5a2",
"#fff5a6","#fff6aa","#fff6af","#fff7b3","#fff7b6","#fff8ba","#fff8bd","#fff8c1",
"#fff8c4","#fff9c7","#fff9ca","#fff9cd","#fffad1","#fffad4","#fffbd8","#fffcdb",
"#fffcdf","#fffde2","#fffde5","#fffde8","#fffeeb","#fffeee","#fffef1","#fffef4",
"#fffff6"];
function get_palette_color(v){
v = v*(iron_palette.length-1);
v_lo = Math.floor(v);
//v_hi = Math.ceil(v);
// don't interpolate
return iron_palette[v_lo];
}
// only valid values are allowed otherwise - disable
if ((settings.lowres!=0)&&(settings.lowres!=1)&&(settings.lowres!=2)&&(settings.lowres!=4)&&(settings.lowres!=8)){
settings.lowres = 0;
}
//https://gist.github.com/leolux/c794fc63d9c362013448
let JP4 = function(element,options){
let elem = $(element);
let obj = this;
let settings = $.extend({
src: "test.jp4",
fromhtmlinput: false,
refresh: false,
mosaic: [["Gr","R"],["B" ,"Gb"]],
fast: false,
precise: false,
lowres: 0, // valid values: 1,2,4,8. 0 to disable
width: 600,
channel: "all",
diff: false,
chn1: "red",
chn2: "green",
ndvi: false,
webworker_path: "js",
debug: false,
callback: function(){
console.log("callback");
}
},options);
let DEBUG = settings.debug;
// work time
let T0, TX;
let BAYER = settings.mosaic;
let FLIPV = 0;
let FLIPH = 0;
let IMAGE_FORMAT = "JPEG";
let SATURATION = [0,0,0,0];
let PIXELS = [];
let INIT = false;
// https://stackoverflow.com/questions/28495390/thermal-imaging-palette
let iron_palette = [
"#00000a","#000014","#00001e","#000025","#00002a","#00002e","#000032","#000036",
"#00003a","#00003e","#000042","#000046","#00004a","#00004f","#000052","#010055",
"#010057","#020059","#02005c","#03005e","#040061","#040063","#050065","#060067",
"#070069","#08006b","#09006e","#0a0070","#0b0073","#0c0074","#0d0075","#0d0076",
"#0e0077","#100078","#120079","#13007b","#15007c","#17007d","#19007e","#1b0080",
"#1c0081","#1e0083","#200084","#220085","#240086","#260087","#280089","#2a0089",
"#2c008a","#2e008b","#30008c","#32008d","#34008e","#36008e","#38008f","#390090",
"#3b0091","#3c0092","#3e0093","#3f0093","#410094","#420095","#440095","#450096",
"#470096","#490096","#4a0096","#4c0097","#4e0097","#4f0097","#510097","#520098",
"#540098","#560098","#580099","#5a0099","#5c0099","#5d009a","#5f009a","#61009b",
"#63009b","#64009b","#66009b","#68009b","#6a009b","#6c009c","#6d009c","#6f009c",
"#70009c","#71009d","#73009d","#75009d","#77009d","#78009d","#7a009d","#7c009d",
"#7e009d","#7f009d","#81009d","#83009d","#84009d","#86009d","#87009d","#89009d",
"#8a009d","#8b009d","#8d009d","#8f009c","#91009c","#93009c","#95009c","#96009b",
"#98009b","#99009b","#9b009b","#9c009b","#9d009b","#9f009b","#a0009b","#a2009b",
"#a3009b","#a4009b","#a6009a","#a7009a","#a8009a","#a90099","#aa0099","#ab0099",
"#ad0099","#ae0198","#af0198","#b00198","#b00198","#b10197","#b20197","#b30196",
"#b40296","#b50295","#b60295","#b70395","#b80395","#b90495","#ba0495","#ba0494",
"#bb0593","#bc0593","#bd0593","#be0692","#bf0692","#bf0692","#c00791","#c00791",
"#c10890","#c10990","#c20a8f","#c30a8e","#c30b8e","#c40c8d","#c50c8c","#c60d8b",
"#c60e8a","#c70f89","#c81088","#c91187","#ca1286","#ca1385","#cb1385","#cb1484",
"#cc1582","#cd1681","#ce1780","#ce187e","#cf187c","#cf197b","#d01a79","#d11b78",
"#d11c76","#d21c75","#d21d74","#d31e72","#d32071","#d4216f","#d4226e","#d5236b",
"#d52469","#d62567","#d72665","#d82764","#d82862","#d92a60","#da2b5e","#da2c5c",
"#db2e5a","#db2f57","#dc2f54","#dd3051","#dd314e","#de324a","#de3347","#df3444",
"#df3541","#df363d","#e0373a","#e03837","#e03933","#e13a30","#e23b2d","#e23c2a",
"#e33d26","#e33e23","#e43f20","#e4411d","#e4421c","#e5431b","#e54419","#e54518",
"#e64616","#e74715","#e74814","#e74913","#e84a12","#e84c10","#e84c0f","#e94d0e",
"#e94d0d","#ea4e0c","#ea4f0c","#eb500b","#eb510a","#eb520a","#eb5309","#ec5409",
"#ec5608","#ec5708","#ec5808","#ed5907","#ed5a07","#ed5b06","#ee5c06","#ee5c05",
"#ee5d05","#ee5e05","#ef5f04","#ef6004","#ef6104","#ef6204","#f06303","#f06403",
"#f06503","#f16603","#f16603","#f16703","#f16803","#f16902","#f16a02","#f16b02",
"#f16b02","#f26c01","#f26d01","#f26e01","#f36f01","#f37001","#f37101","#f37201",
"#f47300","#f47400","#f47500","#f47600","#f47700","#f47800","#f47a00","#f57b00",
"#f57c00","#f57e00","#f57f00","#f68000","#f68100","#f68200","#f78300","#f78400",
"#f78500","#f78600","#f88700","#f88800","#f88800","#f88900","#f88a00","#f88b00",
"#f88c00","#f98d00","#f98d00","#f98e00","#f98f00","#f99000","#f99100","#f99200",
"#f99300","#fa9400","#fa9500","#fa9600","#fb9800","#fb9900","#fb9a00","#fb9c00",
"#fc9d00","#fc9f00","#fca000","#fca100","#fda200","#fda300","#fda400","#fda600",
"#fda700","#fda800","#fdaa00","#fdab00","#fdac00","#fdad00","#fdae00","#feaf00",
"#feb000","#feb100","#feb200","#feb300","#feb400","#feb500","#feb600","#feb800",
"#feb900","#feb900","#feba00","#febb00","#febc00","#febd00","#febe00","#fec000",
"#fec100","#fec200","#fec300","#fec400","#fec500","#fec600","#fec700","#fec800",
"#fec901","#feca01","#feca01","#fecb01","#fecc02","#fecd02","#fece03","#fecf04",
"#fecf04","#fed005","#fed106","#fed308","#fed409","#fed50a","#fed60a","#fed70b",
"#fed80c","#fed90d","#ffda0e","#ffda0e","#ffdb10","#ffdc12","#ffdc14","#ffdd16",
"#ffde19","#ffde1b","#ffdf1e","#ffe020","#ffe122","#ffe224","#ffe226","#ffe328",
"#ffe42b","#ffe42e","#ffe531","#ffe635","#ffe638","#ffe73c","#ffe83f","#ffe943",
"#ffea46","#ffeb49","#ffeb4d","#ffec50","#ffed54","#ffee57","#ffee5b","#ffee5f",
"#ffef63","#ffef67","#fff06a","#fff06e","#fff172","#fff177","#fff17b","#fff280",
"#fff285","#fff28a","#fff38e","#fff492","#fff496","#fff49a","#fff59e","#fff5a2",
"#fff5a6","#fff6aa","#fff6af","#fff7b3","#fff7b6","#fff8ba","#fff8bd","#fff8c1",
"#fff8c4","#fff9c7","#fff9ca","#fff9cd","#fffad1","#fffad4","#fffbd8","#fffcdb",
"#fffcdf","#fffde2","#fffde5","#fffde8","#fffeeb","#fffeee","#fffef1","#fffef4",
"#fffff6"
];
function get_palette_color(v){
v = v*(iron_palette.length-1);
v_lo = Math.floor(v);
//v_hi = Math.ceil(v);
// don't interpolate
return iron_palette[v_lo];
}
var cnv_working = $("<canvas>",{id:"working"});
var cnv_display = $("<canvas>",{id:"display"});
// only valid values are allowed otherwise - disable
if (![0,1,2,4,8].includes(settings.lowres)){
settings.lowres = 0;
}
obj.busy = false;
var cnv_working = $("<canvas>",{id:"working"});
var cnv_display = $("<canvas>",{id:"display"});
// hide working canvas
cnv_working.css({display:"none"});
/*
cnv_working.css({
position:"absolute",
top: "500px",
left: "500px"
});
*/
// hide working canvas
cnv_working.css({display:"none"});
elem.append(cnv_working);
elem.append(cnv_display);
elem.append(cnv_working);
elem.append(cnv_display);
if (DEBUG){
TX = Date.now();
T0 = Date.now();
}
if (DEBUG){
T0 = Date.now();
TX = T0;
}
if (settings.fromhtmlinput){
/*
* if image is being loaded from <input type='file'>
* make sure the image data starts with: "data:image/jpeg;base64,"
* EXIF.js does not like empty data type: "data:;base64,"
*/
obj.busy = true;
process_image(settings.image);
}else{
send_request();
}
if (settings.fromhtmlinput){
/*
* if image is being loaded from <input type='file'>
* make sure the image data starts with: "data:image/jpeg;base64,"
* EXIF.js does not like empty data type: "data:;base64,"
*/
process_image(settings.src);
}else{
send_request();
}
//end
function send_request(){
var rq = "";
var http = new XMLHttpRequest();
if (settings.port!=""&&settings.ip!=""){
//rq = "/get-image.php?ip="+settings.ip+"&port="+settings.port+"&rel=bimg&ts="+Date.now();
rq = "http://"+settings.ip+"/get-image.php?ip="+settings.ip+"&port="+settings.port+"&rel=img&ts="+Date.now();
//rq = "get-image.php?ip="+settings.ip+"&port="+settings.port+"&rel=img&ts="+Date.now();
//settings.refresh = true;
}else{
rq = settings.image;
}
http.open("GET", rq, true);
http.responseType = "blob";
http.onload = function(e) {
let rq = settings.src;
// old, when CORS was not enabled
//rq = "http://"+settings.ip+"/get-image.php?ip="+settings.ip+"&port="+settings.port+"&rel=img&ts="+Date.now();
if (DEBUG){
console.log("#"+elem.attr("id")+", file load time: "+(Date.now()-TX)/1000+" s");
TX = Date.now();
}
let http = new XMLHttpRequest();
http.open("GET", rq, true);
//http.responseType = "blob";
http.responseType = "arraybuffer";
http.onload = function(e) {
if (this.status === 200) {
var contentType = http.getResponseHeader("Content-Type");
if (contentType=="image/tiff"){
process_image_tiff(http.response);
}else{
obj.blob = window.URL.createObjectURL(http.response);
process_image(obj.blob);
if (DEBUG){
console.log("#"+elem.attr("id")+", file load time: "+(Date.now()-TX)/1000+" s");
TX = Date.now();
}
delete this;
//URL.revokeObjectURL(imgdata);
}
};
obj.busy = true;
http.send();
if (this.status===200) {
let contentType = http.getResponseHeader("Content-Type");
if (contentType=="image/tiff"){
process_image_tiff(http.response);
}else{
//obj.blob = window.URL.createObjectURL(http.response);
//process_image(obj.blob);
process_image(http.response);
}
delete this;
//URL.revokeObjectURL(imgdata);
}
};
http.send();
}
this.refresh = function(){
// skip if busy?
if (!obj.busy){
send_request();
}
// skip if busy?
if (!obj.busy){
if (DEBUG){
T0 = Date.now();
TX = T0;
}
send_request();
}
}
this.resize = function(w){
settings.width = w;
send_request();
settings.width = w;
INIT = false;
send_request();
}
this.setAddr = function(url,port){
settings.port = port;
settings.ip = url;
this.setSrc = function(src){
settings.src = src;
return 0;
}
this.getFormat = function(){
return this.format;
}
this.getAddr = function(){
return Array(settings.ip,settings.port);
}
this.getFormat = () => this.format;
this.getSrc = () => settings.src;
function process_image_tiff(blob){
......@@ -397,219 +367,150 @@
function process_image(imagedata){
var canvas = cnv_working;
//reset format
IMAGE_FORMAT = "JPEG";
let img = {};
img.exifdata = EXIF.readFromBinaryFile(imagedata);
parseEXIFMakerNote(img);
var heavyImage = new Image();
if (DEBUG){
console.log("#"+elem.attr("id")+", exif parse time: "+(Date.now()-TX)/1000+" s");
TX = Date.now();
}
var heavyImage = new Image();
heavyImage.onload = function(){
/*
if (obj.blob){
console.log("revoking object");
window.URL.revokeObjectURL(obj.blob);
}
*/
EXIF.getData(this, function() {
var cnv_w;
var cnv_h;
if (settings.lowres!=0){
cnv_w = this.width/settings.lowres;
cnv_h = this.height/settings.lowres;
}else{
cnv_w = this.width;
cnv_h = this.height;
}
//update canvas size
canvas.attr("width",cnv_w);
canvas.attr("height",cnv_h);
parseEXIFMakerNote(this);
canvas.drawImage({
x:0, y:0,
source: this,
width: cnv_w,
height: cnv_h,
//source: heavyImage,
load: redraw,
sx: 0,
sy: 0,
sWidth: this.width,
sHeight: this.height,
//scale: scale,
fromCenter: false
});
});
};
heavyImage.src = imagedata;
}
if (DEBUG){
console.log("#"+elem.attr("id")+", file reload (from Blob) as image time: "+(Date.now()-TX)/1000+" s");
TX = Date.now();
}
function redraw(){
let cnv_w = this.width;
let cnv_h = this.height;
//URL.revokeObjectURL($(this).source.src);
//console.log(this);
if (settings.lowres!=0){
cnv_w = this.width/settings.lowres;
cnv_h = this.height/settings.lowres;
}
//for debugging
//IMAGE_FORMAT="JPEG";
if (!INIT) {
let w = settings.width;
let h = (cnv_h/cnv_w*settings.width).toFixed(0);
$(this).draw({
fn: function(ctx){
if ((cnv_display[0].width!=w)||(cnv_display[0].height!=h)){
cnv_display[0].width = w;
cnv_display[0].height = h;
}
if (DEBUG){
console.log("#"+elem.attr("id")+", raw image drawn time: "+(Date.now()-TX)/1000+" s");
TX = Date.now();
}
INIT = true;
}
if (IMAGE_FORMAT=="JPEG"){
if (IMAGE_FORMAT=="JPEG"){
// if JP4/JP46 it will work through webworker and exit later on workers message
Elphel.Canvas.drawScaled(cnv_working,cnv_display,settings.width);
let canvas = cnv_display[0];
//canvas.width = settings.width;
//canvas.height = Math.floor(cnv_h*settings.width/cnv_w);
let ctx = canvas.getContext('2d');
ctx.drawImage(this,0,0,canvas.width,canvas.height);
if (DEBUG){
console.log("#"+elem.attr("id")+", Total time: "+(Date.now()-T0)/1000+" s");
conclude_processing();
}
$(this).trigger("canvas_ready");
obj.busy = false;
if ((IMAGE_FORMAT=="JP4")||(IMAGE_FORMAT=="JP46")){
if (settings.refresh) {
if (DEBUG){
TX = Date.now();
T0 = Date.now();
}
send_request();
}
let canvas = cnv_working[0];
canvas.width = cnv_w;
canvas.height = cnv_h;
}else if ((IMAGE_FORMAT=="JP4")||(IMAGE_FORMAT=="JP46")){
if (settings.fast){
quickestPreview(ctx);
}/*else{
Elphel.reorderJP4Blocks(ctx,"JP4");
if (settings.precise){
PIXELS = Elphel.pixelsToArrayLinear(ctx);
Elphel.demosaicBilinear(ctx,PIXELS,settings.mosaic,true);
PIXELS = Elphel.pixelsToArray(ctx);
}else{
PIXELS = Elphel.pixelsToArray(ctx);
Elphel.demosaicBilinear(ctx,PIXELS,settings.mosaic,false);
PIXELS = Elphel.pixelsToArray(ctx);
}
if (settings.channel!="all"){
Elphel.showSingleColorChannel(ctx,settings.channel);
}
if (settings.diff){
Elphel.diffColorChannels(PIXELS,settings.chn1,settings.chn2,1);
Elphel.drawImageData(ctx,PIXELS);
}
if (settings.ndvi){
console.log(PIXELS[0]+" "+PIXELS[1]+" "+PIXELS[2]+" "+PIXELS[3]+" ");
PIXELS = Elphel.someIndex(PIXELS);
console.log(PIXELS[0]+" "+PIXELS[1]+" "+PIXELS[2]+" "+PIXELS[3]+" ");
Elphel.drawImageData(ctx,PIXELS);
}
let ctx = canvas.getContext('2d');
ctx.drawImage(this,0,0,cnv_w,cnv_h);
decode_and_display(ctx);
}
*/
// RGB -> YCbCr x SATURATION -> RGB
// Taking SATURATION[0] = 1/GAMMA[0] (green pixel of GR-line)
//saturation(ctx,SATURATION[0]);
}
// too early
//console.log("#"+elem.attr("id")+", time: "+(Date.now()-t0)/1000+" s");
}
});
};
//obj.blob = window.URL.createObjectURL(http.response);
//process_image(obj.blob);
heavyImage.src = window.URL.createObjectURL(new Blob([imagedata]));
}
function quickestPreview(ctx){
var worker = new Worker(settings.webworker_path+'/webworker.js');
if (DEBUG){
TX = Date.now();
}
//ctx.canvas.width = ctx.canvas.width/2;
//ctx.canvas.height = ctx.canvas.height/2;
//ctx.canvas.style.width = ctx.canvas.style.width/4;
//ctx.canvas.style.height = ctx.canvas.style.height/4;
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var image = ctx.getImageData(0,0,width,height);
var pixels = image.data;
if (DEBUG){
console.log("#"+elem.attr("id")+", data from canvas for webworker time: "+(Date.now()-TX)/1000+" s");
TX = Date.now();
}
worker.postMessage({
mosaic: settings.mosaic,
format: IMAGE_FORMAT,
width:ctx.canvas.width,
height:ctx.canvas.height,
pixels:pixels.buffer,
settings: {
fast: settings.fast,
channel: settings.channel,
diff: settings.diff,
ndvi: settings.ndvi,
lowres: settings.lowres
},
},[pixels.buffer]);
function conclude_processing(){
if (DEBUG){
console.log("#"+elem.attr("id")+", Total time: "+(Date.now()-T0)/1000+" s");
}
cnv_working.trigger("canvas_ready");
obj.busy = false;
worker.onmessage = function(e){
if (settings.refresh) {
if (DEBUG){
TX = Date.now();
T0 = Date.now();
}
send_request();
}
}
var pixels = new Uint8Array(e.data.pixels);
var working_context = cnv_working[0].getContext('2d');
function decode_and_display(ctx){
var width = e.data.width;
var height = e.data.height;
let worker = new Worker(settings.webworker_path+'/webworker.js');
if (DEBUG){
console.log("#"+elem.attr("id")+", worker time: "+(Date.now()-TX)/1000+" s");
TX = Date.now();
TX = Date.now();
}
Elphel.Canvas.putImageData(working_context,pixels,width,height);
Elphel.Canvas.drawScaled(cnv_working,cnv_display,settings.width);
let width = ctx.canvas.width;
let height = ctx.canvas.height;
let image = ctx.getImageData(0,0,width,height);
let pixels = image.data;
if (DEBUG){
// report time
console.log("#"+elem.attr("id")+", Total time: "+(Date.now()-T0)/1000+" s");
console.log("#"+elem.attr("id")+", data from canvas for webworker time: "+(Date.now()-TX)/1000+" s");
TX = Date.now();
}
//trigger here
cnv_working.trigger("canvas_ready");
obj.busy = false;
if (settings.refresh) {
worker.postMessage({
mosaic: settings.mosaic,
format: IMAGE_FORMAT,
width: ctx.canvas.width,
height: ctx.canvas.height,
pixels: pixels.buffer,
settings: {
fast: settings.fast,
channel: settings.channel,
diff: settings.diff,
ndvi: settings.ndvi,
lowres: settings.lowres
},
},[pixels.buffer]);
worker.onmessage = function(e){
let width = e.data.width;
let height = e.data.height;
let pixels = new Uint8Array(e.data.pixels);
if (DEBUG){
console.log("#"+elem.attr("id")+", worker time: "+(Date.now()-TX)/1000+" s");
TX = Date.now();
T0 = Date.now();
}
send_request();
}
this.terminate();
}
let ctx = cnv_working[0].getContext('2d');
Elphel.Canvas.putImageData(ctx,pixels,width,height);
Elphel.Canvas.drawScaled(cnv_working,cnv_display,settings.width);
/*
let ctx = cnv_display[0].getContext('2d');
let imgdata = new ImageData(new Uint8ClampedArray(pixels), width, height);
ctx.putImageData(imgdata,0,0);
let k = settings.width/width;
ctx.scale(k,k);
ctx.drawImage(cnv_display[0],0,0);
ctx.scale(1/k,1/k);
*/
conclude_processing();
this.terminate();
}
}
/**
......@@ -667,6 +568,7 @@
if (typeof MakerNote !== 'undefined') color_mode=(MakerNote[10]>>4)&0x0f;
switch(color_mode){
case 0: IMAGE_FORMAT = "JPEG"; break;
case 2: IMAGE_FORMAT = "JP46"; break;
case 5: IMAGE_FORMAT = "JP4"; break;
//default:
......
src/jp4-canvas/webworker.js
View file @ b7d797ad
importScripts('elphel.js');
self.onmessage = function(e) {
var W = e.data.width;
var H = e.data.height;
var Mosaic = e.data.mosaic;
var Format = e.data.format;
var settings = e.data.settings;
var Pixels = new Uint8Array(e.data.pixels);
if (settings.lowres==0){
var reorderedPixels = Elphel.Pixels.reorderBlocksJPx(Pixels,W,H,Format,Mosaic,settings.fast);
//reorder first then downscale
if (settings.fast){
W = W/2;
H = H/2;
onmessage = async (e) => {
let W = e.data.width;
let H = e.data.height;
let Mosaic = e.data.mosaic;
let Format = e.data.format;
let settings = e.data.settings;
let Pixels = new Uint8Array(e.data.pixels);
let reorderedPixels;
if (settings.lowres==0){
reorderedPixels = Elphel.Pixels.reorderBlocksJPx(Pixels,W,H,Format,Mosaic,settings.fast);
//reorder first then downscale
if (settings.fast){
W = W/2;
H = H/2;
}
}else{
reorderedPixels = await Elphel.Pixels.reorderBlocksJP4_lowres(Pixels,W,H,Format,Mosaic,settings.lowres);
W = W/2;
H = H/2;
}
}else{
var reorderedPixels = Elphel.Pixels.reorderBlocksJP4_lowres(Pixels,W,H,Format,Mosaic,settings.lowres);
W = W/2;
H = H/2;
}
Elphel.Pixels.applySaturation(reorderedPixels,W,H,2);
postMessage({
width: W,
height: H,
pixels: reorderedPixels.buffer
},[reorderedPixels.buffer]);
Elphel.Pixels.applySaturation(reorderedPixels,W,H,2);
//Elphel.test();
this.close();
postMessage({
width: W,
height: H,
pixels: reorderedPixels.buffer
},[reorderedPixels.buffer]);
};
\ No newline at end of file
//Elphel.test();
this.close();
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment