如何使用 Restlet 发送（编码）PNG 图像并使用 jQuery 接收（解码）它？答案

【问题标题】：How to send (encode) a PNG image using Restlet and receive (decode) it using jQuery?如何使用 Restlet 发送（编码）PNG 图像并使用 jQuery 接收（解码）它？
【发布时间】：2015-11-30 17:49:09
【问题描述】：

我的 Restlet 服务器上有一个 image。我想将其传输到客户端以在 FabricJS 画布中显示。

在服务器上，我首先读取图片：

import org.apache.commons.io.FileUtils;

private byte[] readImage() {
    try {
        return FileUtils.readFileToByteArray(
                new File(Utils.composeMapImagePath([...])));
    } catch (final IOException exception) {
        getLogger().severe(exception.getMessage());
    }
    return new byte[0];
}

然后，我读取字节数组并使用 Base64 对其进行编码。

@Get
public String getImage() {
    [...]
    byte[] data = readImage();
    return Base64.encode(data, false);
}

在客户端我收到$xhr.responseText 中的文本，以

开头

iVBORw0KGgoAAAANSUhEUgAADMgAABSACAYAAADX2AyFAACAAElEQVR42uzcXW7cuLYGUA+93jKMnkYm0MAdRCNTqYscJN2xDFtSiaT2zzoL38tBI7GrKIrc5M7b29vzGSpAHtHmD/MZkHV+AsD7wvrY+Kn2eRrznj8AAEjq8Xh8GZ+QepL9n89bRL0FvE/MTwAAkdd/FmiADaT5DMxP5gsA7wvxvss1fnw+

然后，我尝试使用类似的代码将字符串转换为 PNG 图像

var img = document.createElement("IMG");
img.onload = function(){
   var fImg = new fabric.Image(img, {options});
   canvas.add(fImg);
   canvas.renderAll();
    canvas.setBackgroundImage(img, function() {
        canvas.renderAll();
    });
}
img.src = myDataURL;

其中myDataURL 是使用以下方法之一构造的：

var myDataURL = "data:image/png;base64," + btoa($xhr.responseText);
var myDataURL = "data:image/png;base64," + btoa(unescape(encodeURIComponent($xhr.responseText)));

出现问题，因为图像没有显示在画布中，Chrome 也没有在预览中显示：

我可以同时更改客户端和服务器。

我应该如何对图像进行编码和解码才能正确显示？

【问题讨论】：

标签： javascript java jquery base64 restlet

【解决方案1】：

您的问题似乎来自您回复的媒体类型。

我使用 jQuery 进行了测试，并通过如下更新服务器资源使事情正常进行：

@Get
public String getImage() {
    [...]
    byte[] data = readImage();
    return new StringRepresentation(
        Base64.encode(data, false),
        MediaType.TEXT_PLAIN);
}

在客户端，我使用了这段代码：

<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    function test() {
      $.ajax({
        url: "/image"
      })
      .success(function( data ) {
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var img = new Image();

        img.onload = function() {
          context.drawImage(this, 0, 0, canvas.width, canvas.height);
        }

        img.src = "data:image/gif;base64," + data;
      });
    }

    $(document).ready(function() {
      $('#test').click(function() {
        test();
      });
    });
    </script>
  </head>
  <body>
    <div id="test">Test</div>
    <canvas id="canvas" width="50" height="50"></canvas>
  </body>
</html>

希望对你有帮助蒂埃里

【讨论】：