【发布时间】：2016-05-17 12:50:18
【问题描述】：
我正在从事光学字符识别学校项目。
在这一步，我必须画一个角色，然后对其应用弗里曼链码。
我正在使用 sketch.js 在画布上绘图
前端代码使用 angularjs 处理，后端使用 Spring & BufferedImage
基于这两个教程：
对于sketch.js：https://intridea.github.io/sketch.js/docs/sketch.html
我写了这个客户端代码：
...
<div class="container">
<div ng-controller="ctrl">
<canvas ng-model="canvas" ng-click="enableSave()" class="panel panel-default" width="200" height="200"></canvas>
<form class="form-horizontal" enctype="multipart/form-data">
<div class="input-group col-md-4">
<span class="input-group-btn">
<button ng-click="clear()" id="clear" type="button" class="btn btn-default">Clear</button>
</span>
<input ng-model="num" type="number" id="num" class="form-control" type="text">
<span class="input-group-btn">
<button ng-click="save()" ng-disabled="modif == false" type="button" class="btn btn-success">Save</button>
</span>
</div>
</form>
</div>
</div>
<script type="text/javascript" src="assets/js/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="assets/js/sketch.min.js"></script>
<script type="text/javascript" src="assets/js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('ctrl', ['$scope', '$log', '$http', function($scope, $log, $http) {
// init
$scope.modif = false;
$scope.canvas = angular.element('canvas');
$scope.context = $scope.canvas[0].getContext('2d');
$scope.canvas.sketch({
defaultColor: "#000000",
defaultSize: 2
});
// enable save button if user draw on canvas
$scope.enableSave = function() {
$scope.modif = true;
};
// convert image to blob : https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata
$scope.toBlob = function(dataURI) {
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
byteString = atob(dataURI.split(',')[1]);
else
byteString = unescape(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++)
ia[i] = byteString.charCodeAt(i);
return new Blob([ia], {
type: mimeString
});
};
// send user's input to server
$scope.save = function() {
var img = $scope.canvas[0].toDataURL('image/png');
$log.info(img);
var fd = new FormData();
var blob = $scope.toBlob(img);
fd.append('img', blob);
$http.post('add.html', fd, {
withCredentials: true,
headers: {
'Content-Type': undefined
},
transformRequest: angular.identity
})
.success(function(result) {
$log.info(result);
})
.error(function(data, status) {});
// clear canvas
img = null;
$scope.clear();
// disable save button
$scope.modif = false;
};
// clear canvas
$scope.clear = function() {
$scope.context.clearRect(0, 0, $scope.canvas[0].width, $scope.canvas[0].height);
$scope.canvas.sketch('actions', []);
}
}]);
$(document).ready(function() {});
</script>
</body>
</html>
弹簧控制器：
@RequestMapping(value = "/add", method = RequestMethod.POST)
@ResponseBody
public String add(@RequestParam("img") MultipartFile image) throws IOException {
log.info("add : POST");
log.info("bytes image : " + image.getBytes().length);
BufferedImage original = ImageIO.read(image.getInputStream());
BufferedImage non_transparent = new BufferedImage(original.getWidth(), original.getHeight(),
BufferedImage.TYPE_INT_RGB);
BufferedImage black_white = new BufferedImage(non_transparent.getWidth(), non_transparent.getHeight(),
BufferedImage.TYPE_BYTE_BINARY);
non_transparent.getGraphics().drawImage(original, 0, 0, null);
non_transparent.getGraphics().dispose();
black_white.getGraphics().drawImage(non_transparent, 0, 0, null);
black_white.getGraphics().dispose();
byte[] original_pixels = ((DataBufferByte) original.getRaster().getDataBuffer()).getData();
log.info("original pixels : " + original_pixels.length);
int[] non_transparent_pixels = ((DataBufferInt) non_transparent.getRaster().getDataBuffer()).getData();
log.info("non transparent pixels : " + non_transparent_pixels.length);
byte[] black_white_pixels = ((DataBufferByte) black_white.getRaster().getDataBuffer()).getData();
log.info("black white pixels : " + black_white_pixels.length);
FileOutputStream fos_original = new FileOutputStream("original.txt");
fos_original.write(original_pixels);
fos_original.close();
File f_original = new File("original.png");
ImageIO.write(original, "png", f_original);
File f_non_transparent = new File("non_transparent.png");
ImageIO.write(non_transparent, "png", f_non_transparent);
FileOutputStream fos_black_white = new FileOutputStream("black_white.txt");
fos_black_white.write(black_white_pixels);
fos_black_white.close();
File f_black_white = new File("black_white.png");
ImageIO.write(black_white, "png", f_black_white);
return STATUS;
}
无论我在var img = $scope.canvas[0].toDataURL('image/png'); 中选择哪种图片格式图片总是以透明方式发送，除了绘制在像素上的像素。
我想将发送的图片从 rgba 转换为基本（0 表示白色像素，1 表示其他）矩阵。
我开始使用 BufferedImage 类进行测试以进行此转换，因为我读过您可以通过创建 来自原始 BufferedImage 的图像类型为 TYPE_BYTE_BINARY 的新 BufferedImage
但是这种方法总是会产生一个全黑的图像，所有字节都设置为 0。
所以我有两个问题？ 有没有办法防止画布上的透明度？ & 是否有内置方法可以将 rgba 转换为 0/1 矩阵？
谢谢。
【问题讨论】：
标签： angularjs spring canvas png bufferedimage