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