How to sign and convert integers in Javascript, output to HTML canvas, and reverse process? -


i'm attempting convert images (using html canvas) rgb ycocg colour space, , save output canvas png, can converted losslessly, based on code here:

https://stackoverflow.com/a/12146329/2399347

the process reversible, attempt works when intermediate format isn't used. without this, code has limited practical application.

i need 'lifting' process use 8-bit signed integers (i believe -128 127, modulo 0x100 in pseudocode), , convert values displayed on canvas (from 0 255), before being able save. if successful, when converted image placed in canvas, reconverting values , reverse lifting should produce original image. values generated can't correctly displayed on canvas (from -255 255).

the above problem beyond current knowledge, , haven't found way of doing far based on online searches , looking @ javascript documentation. know (or interested), please @ code, , suggest or give practical way of doing this, or workaround effect?

<!doctype html> <html> <head>     <meta http-equiv="content-type" content="charset=utf-8" />     <style>     img, canvas {         display: block;         padding-bottom: 1em;     }     </style>     <script> function go() {  //  extract png image canvas      var canvas = document.getelementbyid('ycocg');     var ctx = canvas.getcontext('2d');     var source = document.queryselector("#original");      canvas.width = source.width;     canvas.height = source.height;      ctx.drawimage(source, 0, 0);      var canvasdata = ctx.getimagedata(0, 0, canvas.width, canvas.height);   //  canvas convert image ycocg , in 1 step      var canvasback = document.getelementbyid('back2rgb');     var ctxback = canvasback.getcontext('2d');      canvasback.width = source.width;     canvasback.height = source.height;      ctxback.drawimage(canvas, 0, 0);      var canvasbackdata = ctxback.getimagedata(0, 0, canvas.width, canvas.height);   //  colour space functions  function forward_lift( x1, y1 ) {     var diff = ( ( y1 - x1 ) ) % 256;     var average = ( x1 + ( diff >> 1 ) ) % 256;      return  { c1: average, c2: diff }; }  function reverse_lift( average, diff ) {     var x2 = ( average - ( diff >> 1 ) ) % 256;     var y2 = ( ( x2 + diff ) ) % 256;      return  { c1: x2, c2: y2 }; }  function rgb_to_ycocg24( red, green, blue ) {     // conversion ,      var lift1 = forward_lift( red, blue );     var lift2 = forward_lift( green, lift1.c1 );      var rlift1 = reverse_lift( lift2.c1, lift2.c2 );     var rlift2 = reverse_lift( rlift1.c2, lift1.c2 );      canvasbackdata.data[idx + 0] = rlift2.c1 % 256; // r     canvasbackdata.data[idx + 1] = rlift1.c1 % 256; // g     canvasbackdata.data[idx + 2] = rlift2.c2 % 256; // b      // attempt @ conversion , store      canvasdata.data[idx + 0] = lift2.c1 % 256; // y     canvasdata.data[idx + 1] = lift2.c2 % 256; // cg     canvasdata.data[idx + 2] = lift1.c2 % 256; // co }  function ycocg24_to_rgb( yimg, cg, co ) {     // attempt @ reversing stored image      var rlift1 = reverse_lift( yimg, cg );     var rlift2 = reverse_lift( rlift1.c2, co );      canvasstepdata.data[idx + 0] = rlift2.c1 % 256; // r     canvasstepdata.data[idx + 1] = rlift1.c1 % 256; // g     canvasstepdata.data[idx + 2] = rlift2.c2 % 256; // b }  //  conversion of rgb image ycocg      (var x = 0; x < canvasdata.width; x++) {         (var y = 0; y < canvasdata.height; y++) {             // index of pixel in array             var idx = (x + y * canvas.width) * 4;              rgb_to_ycocg24( canvasdata.data[idx + 0], canvasdata.data[idx + 1], canvasdata.data[idx + 2]  );         }     }     ctxback.putimagedata(canvasbackdata, 0, 0);     ctx.putimagedata(canvasdata, 0, 0);   //  convert ycocg rgb, in 2 steps      var canvasstep = document.getelementbyid('twostep');     var ctxstep = canvasstep.getcontext('2d');      canvasstep.width = source.width;     canvasstep.height = source.height;      ctxstep.drawimage(canvas, 0, 0);      var canvasstepdata = ctxstep.getimagedata(0, 0, canvas.width, canvas.height);      (var x = 0; x < canvasdata.width; x++) {         (var y = 0; y < canvasdata.height; y++) {             // index of pixel in array             var idx = (x + y * canvas.width) * 4;              ycocg24_to_rgb( canvasstepdata.data[idx + 0], canvasstepdata.data[idx + 1], canvasstepdata.data[idx + 2]  );         }     }     ctxstep.putimagedata(canvasstepdata, 0, 0); }     </script> </head>  <body onload="go()">  <div id="container">     original:     <img id="original" src="data:image/png;base64,ivborw0kggoaaaansuheugaabaaaaaqacaiaaadwf7zuaaar00leqvr4xu3a0qndaaxdqtvkao8/bbdqktq4afz7kd9pnut9y5/x/e53/59yf5/73e9+97vf/c+bjaaaah4zaaaagaaaaaaeaaaaiaaaaaabaaaacaaaabaaaacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaabaaaaaaaiaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaacaaaaaaaqaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaabaaaaaaaiaaaaewgudaadqwqaaaaavqaaagaaaaaaeaaaaiaaaaaabaaaacaaaabaaaacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaabaaaaaaaiaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaacaaaaaaaqaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaabaaaaaaaiaaaaewgudaadqwqaaaaavqaaagaaaaaaeaaaaiaaaaaabaaaacaaaabaaaacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaabaaaaaaaiaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaacaaaaaaaqaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaabaaaaaaaiaaaaewgudaadqwqaaaaavqaaagaaaaaaeaaaaiaaaaaabaaaacaaaabaaaacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaabaaaaaaaiaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaacaaaaaaaqaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaabaaaaaaaiaaaaewgudaadqwqaaaaavqaaagaaaaaaeaaaaiaaaaaabaaaacaaaabaaaacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaabaaaaaaaiaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaacaaaaaaaqaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaabaaaaaaaiaaaaewgudaadqwqaaaaavqaaagaaaaaaeaaaaiaaaaaabaaaacaaaabaaaacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaabaaaaaaaiaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaacaaaaaaaqaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaabaaaaaaaiaaaaewgudaadqwqaaaaavqaaagaaaaaaeaaaaiaaaaaabaaaacaaaabaaaacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaabaaaaaaaiaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaacaaaaaaaqaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaabaaaaaaaiaaaaewgudaadqwqaaaaavqaaagaaaaaaeaaaaiaaaaaabaaaacaaaabaaaacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaabaaaaaaaiaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaacaaaaaaaqaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaabaaaaaaaiaaaaewgudaadqwqaaaaavqaaagaaaaaaeaaaaiaaaaaabaaaacaaaabaaaacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaabaaaaaaaiaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaacaaaaaaaqaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaabaaaaaaaiaaaaewgudaadqwqaaaaavqaaagaaaaaaeaaaaiaaaaaabaaaacaaaabaaaacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaabaaaaaaaiaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaacaaaaaaaqaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaabaaaaaaaiaaaaewgudaadqwqaaaaavqaaagaaaaaaeaaaaiaaaaaabaaaacaaaabaaaacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaabaaaaaaaiaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaacaaaaaaaqaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaabaaaaaaaiaaaaewgudaadqwqaaaaavqaaagaaaaaaeaaaaiaaaaaabaaaacaaaabaaaacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaabaaaaaaaiaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaacaaaaaaaqaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaabaaaaaaaiaaaaewgudaadqwqaaaaavqaaagaaaaaaeaaaaiaaaaaabaaaacaaaabaaaacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaabaaaaaaaiaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaacaaaaaaaqaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaabaaaaaaaiaaaaewgudaadqwqaaaaavqaaagaaaaaaeaaaaiaaaaaabaaaacaaaabaaaacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaabaaaaaaaiaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaacaaaaaaaqaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaabaaaaaaaiaaaaewgudaadqwqaaaaavqaaagaaaaaaeaaaaiaaaaaabaaaacaaaabaaaacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaabaaaaaaaiaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaacaaaaaaaqaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaabaaaaaaaiaaaaewgudaabgaqaaac9aaacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaa0aacaaaaaaaqaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaabaaaaaaaiaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaaagaaaaaaeaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaaaqaaaagaaaaaaeaaaaiaaaaaabaaaacaaaaeaaaaaaagaaabaaaacaaaaaaaqaaaaiaaaaqaaaaaacaaaaeaaaaiaaaaaabaaaacaaaaaaaqaaaagaaabaaaaaaaiaaad4aozry/w+u2+oaaaaaelftksuqmcc" />      converted , in 1 step:     <canvas id="back2rgb"></canvas>      converted , stored (right click, save image as):     <canvas id="ycocg"></canvas>      restored previous image:     <canvas id="twostep"></canvas> </div>  </body> </html>


Comments

Post a Comment

Popular posts from this blog

SPSS keyboard combination alters encoding -

my question not have programming practical issue on spss. accident keyword combination cannot remember because did not intend press changed encoding in spss , text in data in different language english shown small boxes. nevertheless, when kind of analysis performed different language text shown in output. does know reason? tried change encoding did not produce result. first, @ edit > options , see whether setting unicode or locale. might fix it. if have text in multiple languages, want unicode. otherwise, may have specific locale set wrong. can change set locale, need know locale want use.
Read more

Add new record to the table by click on the button in Microsoft Access -

in ms access form want implement separate button, adds new record table. in order added button , attached button event: private sub btnaddrec_click() refresh codecontextobject on error resume next docmd.gotorecord , , acnewrec if err.number <> 0 btnaddrec.enabled = false end if end end sub everything ok when open window , click btnaddrec button, problem when first of perform navigation through existed records , after click on button. got runtime error: 2105: «you can't go specified record. may @ end of recordset» . how solve issue, need have ability add new record on click on specific button, no matter, have walked or not walked through records before. thanks. i created simple form field call description (and autonumber) , created button code follows click event. filled number of records , navigated through them, clicked addnewrec button. form navigated new record without issues. able click addnewrec button directly after ...
Read more

CSS3 Transition to highlight new elements created in JQuery -

i want use css3 color transition apply highlight-fading color effect (yellow transparent) new elements appended markup using jquery. css #content div { background-color:transparent; -moz-transition:background-color 2s; -webkit-transition:background-color 2s; -o-transition:background-color 2s; transition:background-color 2s; } #content div.new { background-color:yellow; } html <div id="content"></div> <a id="add-element" href="#">add new element</a> js $('#add-element').click(function() { var newelement = $('<div class="new">new element</div>'); $('#content').append(newelement); newelement.removeclass('new'); }); when click link, new element created. class "new" (background color yellow) , it's appended html markup. should able remove "new" class trigger background color transition transparent (or whate...
Read more