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
Show 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;
}
......
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
......@@ -27,9 +27,9 @@
$(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
......@@ -28,15 +28,13 @@
(function ( $ ) {
//https://gist.github.com/leolux/c794fc63d9c362013448
var JP4 = function(element,options){
let JP4 = function(element,options){
var elem = $(element);
var obj = this;
let elem = $(element);
let obj = this;
var settings = $.extend({
ip: "",
port: "",
image: "test.jp4",
let settings = $.extend({
src: "test.jp4",
fromhtmlinput: false,
refresh: false,
mosaic: [["Gr","R"],["B" ,"Gb"]],
......@@ -56,22 +54,23 @@
}
},options);
var DEBUG = settings.debug;
let DEBUG = settings.debug;
// work time
let T0, TX;
// working time
var T0;
var TX;
let BAYER = settings.mosaic;
let FLIPV = 0;
let FLIPH = 0;
let IMAGE_FORMAT = "JPEG";
let SATURATION = [0,0,0,0];
var BAYER = settings.mosaic;
var FLIPV = 0;
var FLIPH = 0;
var IMAGE_FORMAT = "JPEG";
var SATURATION = [0,0,0,0];
let PIXELS = [];
var PIXELS = [];
let INIT = false;
// https://stackoverflow.com/questions/28495390/thermal-imaging-palette
var iron_palette = ["#00000a","#000014","#00001e","#000025","#00002a","#00002e","#000032","#000036",
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",
......@@ -125,55 +124,45 @@
"#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"];
"#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)){
if (![0,1,2,4,8].includes(settings.lowres)){
settings.lowres = 0;
}
var cnv_working = $("<canvas>",{id:"working"});
var cnv_display = $("<canvas>",{id:"display"});
obj.busy = false;
// hide working canvas
cnv_working.css({display:"none"});
/*
cnv_working.css({
position:"absolute",
top: "500px",
left: "500px"
});
*/
elem.append(cnv_working);
elem.append(cnv_display);
if (DEBUG){
TX = Date.now();
T0 = Date.now();
TX = T0;
}
obj.busy = true;
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);
process_image(settings.src);
}else{
send_request();
}
......@@ -181,21 +170,14 @@
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;
}
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();
let http = new XMLHttpRequest();
http.open("GET", rq, true);
http.responseType = "blob";
//http.responseType = "blob";
http.responseType = "arraybuffer";
http.onload = function(e) {
if (DEBUG){
......@@ -203,59 +185,47 @@
TX = Date.now();
}
if (this.status === 200) {
var contentType = http.getResponseHeader("Content-Type");
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);
//obj.blob = window.URL.createObjectURL(http.response);
//process_image(obj.blob);
process_image(http.response);
}
delete this;
//URL.revokeObjectURL(imgdata);
}
};
obj.busy = true;
http.send();
}
this.refresh = function(){
// skip if busy?
if (!obj.busy){
if (DEBUG){
T0 = Date.now();
TX = T0;
}
send_request();
}
}
this.resize = function(w){
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,89 +367,78 @@
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);
if (DEBUG){
console.log("#"+elem.attr("id")+", file reload (from Blob) as image time: "+(Date.now()-TX)/1000+" s");
TX = Date.now();
}
*/
EXIF.getData(this, function() {
var cnv_w;
var cnv_h;
let cnv_w = this.width;
let cnv_h = this.height;
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
});
}
});
if (!INIT) {
let w = settings.width;
let h = (cnv_h/cnv_w*settings.width).toFixed(0);
};
heavyImage.src = imagedata;
if ((cnv_display[0].width!=w)||(cnv_display[0].height!=h)){
cnv_display[0].width = w;
cnv_display[0].height = h;
}
INIT = true;
}
function redraw(){
if (IMAGE_FORMAT=="JPEG"){
//URL.revokeObjectURL($(this).source.src);
//console.log(this);
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);
//for debugging
//IMAGE_FORMAT="JPEG";
conclude_processing();
}
$(this).draw({
fn: function(ctx){
if ((IMAGE_FORMAT=="JP4")||(IMAGE_FORMAT=="JP46")){
if (DEBUG){
console.log("#"+elem.attr("id")+", raw image drawn time: "+(Date.now()-TX)/1000+" s");
TX = Date.now();
}
let canvas = cnv_working[0];
canvas.width = cnv_w;
canvas.height = cnv_h;
if (IMAGE_FORMAT=="JPEG"){
let ctx = canvas.getContext('2d');
ctx.drawImage(this,0,0,cnv_w,cnv_h);
// if JP4/JP46 it will work through webworker and exit later on workers message
Elphel.Canvas.drawScaled(cnv_working,cnv_display,settings.width);
decode_and_display(ctx);
}
};
//obj.blob = window.URL.createObjectURL(http.response);
//process_image(obj.blob);
heavyImage.src = window.URL.createObjectURL(new Blob([imagedata]));
}
function conclude_processing(){
if (DEBUG){
console.log("#"+elem.attr("id")+", Total time: "+(Date.now()-T0)/1000+" s");
}
$(this).trigger("canvas_ready");
cnv_working.trigger("canvas_ready");
obj.busy = false;
if (settings.refresh) {
......@@ -489,70 +448,20 @@
}
send_request();
}
}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);
}
}
*/
// 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");
}
});
}
function quickestPreview(ctx){
function decode_and_display(ctx){
var worker = new Worker(settings.webworker_path+'/webworker.js');
let 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;
let width = ctx.canvas.width;
let height = ctx.canvas.height;
let image = ctx.getImageData(0,0,width,height);
let pixels = image.data;
if (DEBUG){
console.log("#"+elem.attr("id")+", data from canvas for webworker time: "+(Date.now()-TX)/1000+" s");
......@@ -562,9 +471,9 @@
worker.postMessage({
mosaic: settings.mosaic,
format: IMAGE_FORMAT,
width:ctx.canvas.width,
height:ctx.canvas.height,
pixels:pixels.buffer,
width: ctx.canvas.width,
height: ctx.canvas.height,
pixels: pixels.buffer,
settings: {
fast: settings.fast,
channel: settings.channel,
......@@ -574,42 +483,34 @@
},
},[pixels.buffer]);
worker.onmessage = function(e){
var pixels = new Uint8Array(e.data.pixels);
var working_context = cnv_working[0].getContext('2d');
var width = e.data.width;
var height = e.data.height;
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();
}
Elphel.Canvas.putImageData(working_context,pixels,width,height);
let ctx = cnv_working[0].getContext('2d');
Elphel.Canvas.putImageData(ctx,pixels,width,height);
Elphel.Canvas.drawScaled(cnv_working,cnv_display,settings.width);
if (DEBUG){
// report time
console.log("#"+elem.attr("id")+", Total time: "+(Date.now()-T0)/1000+" s");
}
//trigger here
cnv_working.trigger("canvas_ready");
obj.busy = false;
if (settings.refresh) {
if (DEBUG){
TX = Date.now();
T0 = Date.now();
}
send_request();
}
/*
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) {
onmessage = async (e) => {
var W = e.data.width;
var H = e.data.height;
var Mosaic = e.data.mosaic;
var Format = e.data.format;
let W = e.data.width;
let H = e.data.height;
let Mosaic = e.data.mosaic;
let Format = e.data.format;
var settings = e.data.settings;
let settings = e.data.settings;
var Pixels = new Uint8Array(e.data.pixels);
let Pixels = new Uint8Array(e.data.pixels);
let reorderedPixels;
if (settings.lowres==0){
var reorderedPixels = Elphel.Pixels.reorderBlocksJPx(Pixels,W,H,Format,Mosaic,settings.fast);
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{
var reorderedPixels = Elphel.Pixels.reorderBlocksJP4_lowres(Pixels,W,H,Format,Mosaic,settings.lowres);
reorderedPixels = await Elphel.Pixels.reorderBlocksJP4_lowres(Pixels,W,H,Format,Mosaic,settings.lowres);
W = W/2;
H = H/2;
}
......@@ -35,5 +37,4 @@ self.onmessage = function(e) {
//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