Question

我的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无法在预览中显示：

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

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

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接收（解码）它？

1 个答案: