从未压缩的原始 PNG 数据创建 PNG答案

【问题标题】：Creating a PNG from uncompressed raw PNG data从未压缩的原始 PNG 数据创建 PNG
【发布时间】：2015-08-03 08:21:08
【问题描述】：

我正在使用这个Android Screenshot Library 来截取屏幕截图。我想在网络浏览器中显示此屏幕截图。

我在 PC 上编写了一个小型套接字应用程序，它连接到 Android 手机并将捕获的屏幕截图编码为 base64。

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

这个 base64 正在通过 websocket 发送到网页。下面是我的 html/JS 代码，它应该在画布上绘制图像。我已将 base64 图像数据存储在文本文件中以供测试。

<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>

为方便起见，这里是相同代码的JsFiddle。

请指出正确的算法如何从原始未压缩数据生成 PNG。代码示例会很棒;)

谢谢

【问题讨论】：

你确定你的data参数是base64字符串吗？
loadImage(data)中有什么数据？大概image.onerror会执行
'data' 是 base64 图像数据，我可以加载它。

标签： javascript android c

【解决方案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); }

【讨论】：

棘手！虽然我想了解它是如何在 JavaScript 中完成的，但它工作得很好。但是我想当我们在设备本身上有 API 时，在浏览器中这样做是没有意义的。接受它作为答案。谢谢。
感谢您的回复。
嗯，除了 JPEG 不是您所要求的，也不是屏幕截图的合适格式。它会产生可怕的量化噪声。 PNG 是绘图、徽标和类似非摄影图像的唯一合适格式。
@LeeDanielCrocker - 是的，我想要PNG格式，这很容易做到，只需将标志Bitmap.CompressFormat.JPEG更改为Bitmap.CompressFormat.PNG :)

【解决方案2】：

注意

1) 不按样式或css设置画布尺寸，只能这样

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

或

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

2) 要绘制具有画布尺寸的图像，请这样做

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

或

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

【讨论】：