根据未压缩的原始PNG数据创建PNG

Question

I am using this Android Screenshot Library to capture screenshots. I want to show this screenshot in web browser.

I have written a small socket app on PC which connects to Android phone and encode the captured screenshot to base64.

String base64 = Base64.getEncoder().encodeToString(bytes);

This base64 is being sent to web page over websocket. Below is my html/JS code which should draw the image on canvas. I have stored the base64 image data in a text file for test purpose.

<div style="background: aqua; width: 500px; height: 660px;">

    <canvas style="width: 480px; height: 640px;" id="sim">
    </canvas>
</div>

<script type="text/javascript">
    var ctx;
    var width = 480;
    var height = 640;

    (function start() {
        ctx = document.getElementById("sim").getContext("2d");
        loadFromFile();
    })();

    function loadImage(data) {

        var image = new Image();
        image.onload = function() {
            //this part never executes
            ctx.drawImage(image, 0, 0);
            console.log("images loaded!");
        }

        image.src = "data:image/png;base64," + data;
    }

    function loadFromFile() {
        //please get data from **https://app.box.com/s/e19ww51fd37h4sy8getjnag31ud6tpp9**
        var file = "imagefile.txt";

        var rawFile = new XMLHttpRequest();
        rawFile.open("GET", file, true);

        rawFile.onreadystatechange = function() {
            if (rawFile.readyState === 4) {
                if (rawFile.status === 200 || rawFile.status == 0) {
                    var data = rawFile.responseText;
                    console.log("data loaded: " + data.length);

                    loadImage(data);
                }
            }
        }
        rawFile.send(null);
    }
</script>

For convenience, here is the JsFiddle of same code.

Please point to right algorithm as how to generate the PNG from the raw uncompressed data. code sample would be great ;)

Thanks

Answer 1

public static String encodeTobase64(Bitmap image)
{
Bitmap immagex=image;
ByteArrayOutputStream baos = new ByteArrayOutputStream();  
immagex.compress(Bitmap.CompressFormat.JPEG, 100, baos);
byte[] b = baos.toByteArray();
String imageEncoded = Base64.encodeToString(b,Base64.DEFAULT);

Log.e("LOOK", imageEncoded);
return imageEncoded;
}

public static Bitmap decodeBase64(String input) 

{
byte[] decodedByte = Base64.decode(input, 0);
return BitmapFactory.decodeByteArray(decodedByte, 0, decodedByte.length); }

Answer 2

Note that

1) set dimension of canvas not by style or css, only this way

<canvas width="480" height="640"> 

or

canvas //canvas variable
canvas.width = 480;
canvas.height = 640;

2) To draw image with dimension of canvas, do this way

ctx.drawImage(image, 0, 0, image.width,image.height);

or

canvas.width=image.width; canvas.height=image.height; ctx.drawImage(image, 0, 0);