javascript - 如何使用 ReSTLet 发送(编码)PNG 图像并使用 jQuery 接收(解码)它？-6ren

javascript - 如何使用 ReSTLet 发送(编码)PNG 图像并使用 jQuery 接收(解码)它？

转载作者：行者123 更新时间：2023-11-29 21:38:38

27

4

我有一个 image在我的 ReSTLet 服务器上。我想将它传输到客户端以在 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 也没有在预览中显示它:

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

我应该如何对图像进行编码和解码以使其正确显示？

最佳答案

看来你的问题出在你回复的媒体类型上。

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

希望对你有帮助，蒂埃里

关于javascript - 如何使用 ReSTLet 发送(编码)PNG 图像并使用 jQuery 接收(解码)它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34004803/

27

4

0

文章推荐： android - 推特图片上传(twitpic api)- 无法找到图片上传方法

文章推荐： android - 在 Android 中创建垂直线

文章推荐： mysql - 太多的子查询会导致内部服务器错误500吗？

Golang 中的 Json 解码/解码
我有以下 json: {"results": [{"columns":["room_id","player_name","player_ip"], "types":["integer","text
json - Golang 解码/解码 JSON 中的无效 unicode
我在 go 中获取格式不一致的 JSON 文件。例如，我可以有以下内容: {"email": "\"blah.blah@blah.com\""} {"email": "robert@gmail.com
javascript - JavaScript 中的 JSON 编码/解码 base64 编码/解码
JavaScript中有JSON编码/解码base64编码/解码函数吗？最佳答案是的，btoa() 和 atob() 在某些浏览器中可以工作: var enc = btoa("this is so
Encog之一 - 解码
我在其中一个项目中使用了 Encog，但在解码 One-Of Class 时卡住了。该字段的规范化操作之一是 NormalizationAction.OneOf，它具有三个输出。当我评估时，我想解码预
R:序列化不完全匹配的文本的base64编码/解码
在我的 previous question关于使用 serialize() 创建对象的 CSV 我从 jmoy 那里得到了一个很好的答案，他推荐了我的序列化文本的 base64 编码。这正是我要找的。
解码 JPEG 文件时跨浏览器不兼容？
有些事情让我感到困惑 - 为什么 this image在每个浏览器中显示不同？ IE9(和 Windows 照片查看器)中的图像: Firefox(和 Photoshop)中的图像: Chrome(和
java - JAXB 解码
是否可以在不知道它的类型( JAXBContext.newInstance(clazz) )的情况下解码一个类，或者什么是测试即将到来的正确方法？我确实收到了从纯文本中解码的消息 - 字符串传入的
OpenSSL Base64 解码
我正在尝试使用 openSSL 库进行 Base64 解码，然后使用 CMS 来验证签名。下面的代码总是将缓冲区打印为 NULL。 char signed_data[] = "MIIO"; int
iphone - 如何对选择器的引用进行编码/解码？
我有一个带有 SEL 类型实例变量的类，它是对选择器的引用。在encodeWithCoder/initWithCoder中，如何编码/解码这种类型的变量？最佳答案您可以使用 NSStringFro
javascript - 解码 ReadableByteStreams
var url = 'http://www.googleapis.com/customsearch/v1?q=foo&searchType=image'; window.fetch(url) .t
android - 在Android中支持对视频文件进行编码/解码
我想知道Android 2.2、2.3和3,4支持的音频/视频格式列表。我也想知道哪些Android版本支持视频编码和解码。我经历了this link，但是关于编码和解码我并不清楚。任何人的回答都是
Encog One Of - 解码
我在其中一个项目中使用 Encog，但在解码 One-Of 类时遇到了困难。该字段的规范化操作之一是 NormalizationAction.OneOf，它具有三个输出。当我评估时，我想解码预测值。如
java - 解码 XML
我正在尝试解码现有的 xml 文件，以便我可以正确处理数据，但 XML 结构看起来很奇怪。下面是 xml 示例以及我创建的对象。 11 266 AA1001 1
Unicode URL 解码
对 unicode 字符进行 URL 编码的常用方法是将其拆分为 2 %HH 代码。 (\u4161 => %41%61) 但是，unicode在解码时是如何区分的呢？您如何知道 %41%61 是 \
Java 解码 JSON
我正在尝试将 json 字符串解码为 Map。我知道有很多这样的问题，但我需要非常具体的格式。例如，我有 json 字符串: { "map": { "a": "b",
SQL 解码 - 选择和位置
我有一个查询，我认为需要像这样(解码会更大) SELECT firstName, lastName, decode(mathMrk, 80, 'A', mathMrk) as decodeMat
PHP 仅对数字和字符进行字符串编码/解码
我知道PHP函数encode()和decode()，它们对我来说工作得很好，但我想在url中传递编码字符串，但encode确实返回特殊字符，如“=”、“”' “等等...... 这显然会破坏我的脚本，
Java - Base64 解码
我必须解码 Basic bW9uTG9naW46bW9uTW90RGVQYXNz 形式的 http 请求的授权 header 当我解码它时online ，我得到了正确的结果 monLogin:monM
java - 哪个Java库提供base64编码/解码？
这个问题已经有答案了: Decode Base64 data in Java (21 个回答) 已关闭 8 年前。我想知道使用哪个库进行 Base64 编码/解码？我需要此功能足够稳定以供生产使用。
java - 解码 [] 字节我只得到字符��
我正在尝试从 Arduino BT 解码 []byte，我的连接完美，问题是当我尝试解码数组时。我得到的只是这个字符�(发送的字节数相同)我认为问题出在解码上。我尝试使用 ASCII 字符集，但仍然存

首页

博学

6Ren·AI

商城

javascript - 如何使用 ReSTLet 发送(编码)PNG 图像并使用 jQuery 接收(解码)它？