我的Restlet服务器上有一个图像。我想将其传输到客户端以在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. response seText中收到一个文本，它以
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.response seText）；var myDataURL="data： image/png；base64，"btoa（un逃逸（编码组件（$xhr.响应文本）））；出现问题是因为图像没有显示在画布中，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>
希望对你有帮助蒂埃里
