用canvas加载pgm图片后在通过canvas的toDataURL方法导出这张pgm图片发现导出的图片字节容量与一开始的字节容量不同,导出的pgm图片再用canvas加载会加载不出来

 在PGM文件格式中,每个像素的灰度值通常为一个字节,也就是8位。而Canvas的toDataURL()方法生成的Base64字符串是由每个像素的红、绿、蓝三个通道的值组成的,每个通道的值通常为一个字节,也就是8位。因此,在使用toDataURL()方法导出PGM图片时,每个像素的灰度值被转换成了三个通道的值,因此导致导出的PGM图片字节容量不同于原始PGM图片。

如果要保持原始PGM图片的字节容量,可以使用Canvas的toBlob()方法将Canvas转换为Blob对象,然后再将Blob对象保存到文件或者发送到服务器。以下是一个示例:

1.canvas转成pgm格式数据的Blob对象

 function getblob(canvas) {

var ctx = canvas.getContext("2d");
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pgmData = new Uint8Array(canvas.width * canvas.height);
for (var i = 0; i < imageData.data.length; i += 4) {
    var r = imageData.data[i];
    var g = imageData.data[i + 1];
    var b = imageData.data[i + 2];
    var gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
    pgmData[i / 4] = gray;
}
var header = "P5\n" + canva

你可能感兴趣的:(新ros专栏,javascript,开发语言,ecmascript,canvas,pgm)