Closed Austin-Scott closed 5 years ago
It looks like we will need to use one of the many Javascript PNG encoder/decoder libraries such as pngjs.
Can someone try to get this to work? Either we need someway to covert back-and-forth between Image objects and BasicImage without losing any data or someway to read/write PNG files to-and-from BasicImage objects without losing any data.
If I get more time I'll do some more testing to confirm that it is the canvas drawing specifically that is causing us to lose data and not the base64 image representation on line 52 of StandardizeImageFormat.js.
Still needs to be tested but by using Blobs and the UPNG Library I just added a possible solution. The new code is in the StandardizeImageFormat.js file. Feel free to ask any questions and write test code for these functions if you have free time, my schedule is pretty bogged down these next few days.
I'll try my best to test these functions if I have time, and I'll let you know what I find out!
Tanner Verber
Applied Mathematics and Computer Science
University of Wisconsin Stout
From: Austin Scott notifications@github.com Sent: Friday, December 7, 2018 9:43:39 AM To: Madministrator/steganography Cc: Verber, Tanner; Assign Subject: Re: [Madministrator/steganography] Canvas Image Convertions Lose Data (#5)
Still needs to be tested but by using Blobshttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FBlob&data=01%7C01%7Cverbert1712%40my.uwstout.edu%7C8b432b4297cf403e168408d65c5ac338%7Cb71a81a32f9543819b89c62343a66052%7C0&sdata=1%2FtO5A%2Bau5OO3OAx%2FejN6lKQPfE58h1c973%2BKOeC37o%3D&reserved=0 and the UPNG Libraryhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fphotopea%2FUPNG.js&data=01%7C01%7Cverbert1712%40my.uwstout.edu%7C8b432b4297cf403e168408d65c5ac338%7Cb71a81a32f9543819b89c62343a66052%7C0&sdata=7gzD%2FnAN7yN2Gysk%2BZ%2FkhFL3VlfPdiDwJxKccrrZBwg%3D&reserved=0 I just added a possible solution. The new code is in the StandardizeImageFormat.js filehttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FMadministrator%2Fsteganography%2Fblob%2FBack-End-JavaScript%2FStandardizeImageFormat.js&data=01%7C01%7Cverbert1712%40my.uwstout.edu%7C8b432b4297cf403e168408d65c5ac338%7Cb71a81a32f9543819b89c62343a66052%7C0&sdata=57ewTbX6U7%2FxtTOEKR9992EgrAc43ER7FX7w6Ns7Vvg%3D&reserved=0. Feel free to ask any questions and write test code for these functions if you have free time, my schedule is pretty bogged down these next few days.
— You are receiving this because you were assigned. Reply to this email directly, view it on GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FMadministrator%2Fsteganography%2Fissues%2F5%23issuecomment-445272141&data=01%7C01%7Cverbert1712%40my.uwstout.edu%7C8b432b4297cf403e168408d65c5ac338%7Cb71a81a32f9543819b89c62343a66052%7C0&sdata=ReX7cYPaokvvmDSt0xd4qH39HYuhMMeCz96SWwM12LY%3D&reserved=0, or mute the threadhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAq7riNJjODRijo6HPSZkCe56c9kbi2lPks5u2oyrgaJpZM4ZIZ0N&data=01%7C01%7Cverbert1712%40my.uwstout.edu%7C8b432b4297cf403e168408d65c5ac338%7Cb71a81a32f9543819b89c62343a66052%7C0&sdata=nfE%2BF7kb6IU9WMrrA%2FY8P%2FbM2Ky176x4MZOH60r6ceY%3D&reserved=0.
I managed to find time to test the new functions. We have a solution! :D We also now have a working JavaScript prototype. Check out testHideImage.html and testFindImage.html to see the code in action! Now all we need to do is write super similar functions for when we are working with text files and hook up the backend to the front end! 😄
Awesome! Thank you!
Tanner Verber
Applied Mathematics and Computer Science
University of Wisconsin Stout
From: Austin Scott notifications@github.com Sent: Friday, December 7, 2018 1:09:32 PM To: Madministrator/steganography Cc: Verber, Tanner; Assign Subject: Re: [Madministrator/steganography] Canvas Image Convertions Lose Data (#5)
— You are receiving this because you were assigned. Reply to this email directly, view it on GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FMadministrator%2Fsteganography%2Fissues%2F5%23event-2013199307&data=01%7C01%7Cverbert1712%40my.uwstout.edu%7C7bdebc607f674d6bdb1708d65c778626%7Cb71a81a32f9543819b89c62343a66052%7C0&sdata=VFagVNWYx9fSUuTDZVGB7icQkAf7MZ5hXgXDADTTU8g%3D&reserved=0, or mute the threadhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAq7riDyNQPCIDUvMGvZy03-0THXFRHCOks5u2rzsgaJpZM4ZIZ0N&data=01%7C01%7Cverbert1712%40my.uwstout.edu%7C7bdebc607f674d6bdb1708d65c778626%7Cb71a81a32f9543819b89c62343a66052%7C0&sdata=OoOa4b3wvVWZq4aonAIE1LjZmU%2Ff3y%2BWYjZ%2BG4eDmE0%3D&reserved=0.
Drawing to the canvas is a lossy operation. We currently use the canvas to get the pixel data for our images but when I tested the code the the resulting images are garbled. I then did a quick web search that confirmed my suspicion: Example 1 Example 2. Due to rounding errors drawing anything in any format to the canvas loses data. We can only use the canvas to convert between jpeg to png. We need a different approach for encoding/decoding our images.