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

最新推荐文章于 2024-02-03 21:39:09 发布

_无往而不胜_

最新推荐文章于 2024-02-03 21:39:09 发布

阅读量523

点赞数

分类专栏：新ros专栏文章标签： javascript 开发语言 ecmascript canvas pgm

本文链接：https://blog.csdn.net/qq_15204179/article/details/129635002

版权

新ros专栏专栏收录该内容

96 篇文章 72 订阅 ¥159.90 ¥299.90

订阅专栏

超级会员免费看

当使用canvas加载PGM图片并用toDataURL导出时，由于每个像素从8位灰度值变为24位RGB，导致字节容量增大。为保持原始容量，可以使用toBlob方法将canvas转换为Blob对象，然后保存为二进制PGM文件，以保持原始格式。这种方法确保了PGM图片能够正确加载和识别。

摘要由CSDN通过智能技术生成

在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