Skip to content

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

quicker JP4 previews

parent dcef915e
Hide whitespace changes
Inline Side-by-side
Showing with 133 additions and 42 deletions
src/jp4-canvas/elphel.js
View file @ ece04dd0
......@@ -105,6 +105,55 @@ var Elphel = {
// Pixel manipulation
Pixels:{
reorderBlocksJP4_lowres: function(pixels,width,height,format="JP4",mosaic=[["Gr","R"],["B" ,"Gb"]],lowres){
var oPixels = new Uint8Array(pixels.length/4);
// check
if ((lowres!=1)&&(lowres!=2)&&(lowres!=4)&&(lowres!=8)){
lowres = 4;
}
var K0 = 3-Math.log(lowres)/Math.log(2);
var K1 = 1<<K0;
var K2 = K1-1;
for(var y=0;y<height/2;y++){
for(var x=0;x<width/2;x++){
offset = y*width/2+x;
y0 = 2*K1*(y>>K0)+(y&K2);
x0 = 4*K1*(x>>K0)+(x&K2);
if (x0>=width){
x0 = x0 - width;
y0 = y0 + K1;
}
offset0 = width*y0 + x0;
for(var k=0;k<4;k++){
ym = (k>>1)&1;
xm = k&1;
if (mosaic[ym][xm]=="R") r = pixels[4*(offset0+K1*k)+0];
else if (mosaic[ym][xm]=="Gr") gr = pixels[4*(offset0+K1*k)+0];
else if (mosaic[ym][xm]=="Gb") gb = pixels[4*(offset0+K1*k)+0];
else if (mosaic[ym][xm]=="B") b = pixels[4*(offset0+K1*k)+0];
}
g = (gr+gb)>>1;
oPixels[4*(offset)+0] = r;//pixels[4*(4*offset+1)+0];
oPixels[4*(offset)+1] = g;//pixels[4*(4*offset+0)+0];
oPixels[4*(offset)+2] = b;//pixels[4*(4*offset+2)+0];
oPixels[4*(offset)+3] = 255;
}
}
return oPixels;
},
/**
* Name: reorderJP4Blocks
* Description: clear from the function's name
......@@ -130,6 +179,8 @@ var Elphel = {
*/
reorderBlocksJPx: function(pixels,width,height,format="JP4",mosaic=[["Gr","R"],["B" ,"Gb"]],nwd=false){
var nwd2 = true;
var t0 = Date.now();
// pixels is a long 1-D array with the following structure:
......
src/jp4-canvas/jp4-canvas.js
View file @ ece04dd0
......@@ -27,9 +27,9 @@
$(function(){
var t1 = $("#test1").jp4({port:2323,width:600,fast:true});
var t2 = $("#test2").jp4({port:2324,width:600,fast:true});
var t3 = $("#test3").jp4({port:2325,width:600,fast:true});
var t4 = $("#test4").jp4({port:2326,width:600,fast:true});
var t1 = $("#test1").jp4({port:2323,width:600,fast:true,lowres:4});
var t2 = $("#test2").jp4({port:2324,width:600,fast:true,lowres:4});
var t3 = $("#test3").jp4({port:2325,width:600,fast:true,lowres:4});
var t4 = $("#test4").jp4({port:2326,width:600,fast:true,lowres:4});
});
src/jp4-canvas/jquery-jp4.js
View file @ ece04dd0
......@@ -34,12 +34,14 @@
var obj = this;
var settings = $.extend({
ip: "",
port: "",
image: "test.jp4",
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,
......@@ -68,6 +70,13 @@
// 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);
......@@ -82,45 +91,69 @@
//reset format
IMAGE_FORMAT = "JPEG";
TX = Date.now();
T0 = Date.now();
var http = new XMLHttpRequest();
var rq = "";
if (settings.port!=""){
rq = "get-image.php?port="+settings.port+"&rel=bimg&ts="+Date.now();
if (settings.port!=""&&settings.ip!=""){
rq = "get-image.php?ip="+settings.ip+"&port="+settings.port+"&rel=bimg&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);
TX = Date.now();
T0 = Date.now();
http.responseType = "blob";
http.onload = function(e) {
console.log("#"+elem.attr("id")+", file load time: "+(Date.now()-TX)/1000+" s");
TX = Date.now();
if (this.status === 200) {
var heavyImage = new Image();
heavyImage.onload = function(){
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",this.width);
canvas.attr("height",this.height);
canvas.attr("width",cnv_w);
canvas.attr("height",cnv_h);
parseEXIFMakerNote(this);
canvas.drawImage({
x:0, y:0,
source: heavyImage,
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 = URL.createObjectURL(http.response);
}
......@@ -131,12 +164,16 @@
}
function redraw(){
//for debugging
//IMAGE_FORMAT="JPEG";
$(this).draw({
fn: function(ctx){
fn: function(ctx){
console.log("#"+elem.attr("id")+", raw image drawn time: "+(Date.now()-TX)/1000+" s");
TX = Date.now();
if (IMAGE_FORMAT=="JPEG"){
// if JP4/JP46 it will work through webworker and exit later on workers message
......@@ -188,8 +225,6 @@
// too early
//console.log("#"+elem.attr("id")+", time: "+(Date.now()-t0)/1000+" s");
// custom event
//$(this).trigger("canvas_ready");
if (settings.refresh) get_image();
}
......@@ -197,9 +232,16 @@
}
function quickestPreview(ctx){
var worker = new Worker('js/webworker.js');
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);
......@@ -218,10 +260,12 @@
fast: settings.fast,
channel: settings.channel,
diff: settings.diff,
ndvi: settings.ndvi
ndvi: settings.ndvi,
lowres: settings.lowres
},
},[pixels.buffer]);
worker.onmessage = function(e){
var pixels = new Uint8Array(e.data.pixels);
......
src/jp4-canvas/webworker.js
View file @ ece04dd0
......@@ -12,31 +12,27 @@ self.onmessage = function(e) {
var Pixels = new Uint8Array(e.data.pixels);
if (Format!="JPEG"){
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;
}
Elphel.Pixels.applySaturation(reorderedPixels,W,H,2);
postMessage({
width: W,
height: H,
pixels: reorderedPixels.buffer
},[reorderedPixels.buffer]);
}else{
//just send back
postMessage({
width: W,
height: H,
pixels: Pixels.buffer
},[Pixels.buffer]);
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.test();
};
\ No newline at end of file
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