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

Question

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

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

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

出现问题，因为图像未显示在 canvas 中，并且 Chrome 未显示在预览中：

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

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

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

希望对你有帮助，蒂埃里

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

How to send (encode) a PNG image using Restlet and receive (decode) it using jQuery?

javascript

java

jquery

base64

restlet