JavaScript可以检查图像的颜色模式吗？
我做了很多搜索，但我唯一看到的是颜色模式转换（但转换需要你设置原始颜色模式）
我添加了这个：--allow-file-access-from-files以便在画布中完全控制img，因为我使用的是GoogleChrome
HTML
<canvas id="canvas" width=6000 height=7919></canvas>
的js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.crossOrigin = "anonymous";
img.onload = start;
img.src = "file:///D:/vincent-van-gogh-the-starry-night-picture-157544-2.png";
答案 0 :(得分：2)
JavaScript可以检查图像的颜色模式吗？
是和否。
否如果您使用普通图片加载。浏览器支持的所有图像在通过Image对象（HTMLImageElement）传递给我们之前都会转换为RGB（A）。
此时，除了尺寸和原点外，不会显示有关原始格式和颜色模型的信息。
Canvas仅处理RGBA作为显示的所有其他元素，并且没有本地方法来处理CMYK等颜色模型。
您可以随时读取RGBA值并天真地转换为CMYK，但是，如果没有目标打印机的ICC配置文件，由于RGB色域，打印机以及打印介质的特性，您会遇到各种问题必须通过ICC配置文件进行调整。这意味着在大多数情况下，结果不会产生正确的颜色。
您必须设置服务器端解决方案才能实现此功能。将图像发送到服务器，转换为CMYK /应用ICC，然后发送到打印机。 ImageMagick可能是解决问题的一种方法。浏览器根本不会被剪切（也不打算）用于面向打印的处理。
是如果您愿意手动编写图像解析器以及ICC解析器。您需要支持各种格式和格式组合，并且还能够在导入时应用ICC / gamma以及通过目标ICC导出到CMYK（意味着您需要支持XYZ / LAB颜色空间）。
导出将要求您编写支持CMYK颜色空间和ICC嵌入的文件编写器。
成熟过程，错误，不稳定性等将是过程的自然部分，并且可能不会立即用于生产。
如果您只是在文件的颜色模式之后并且可以像普通一样加载图像，您当然可以先通过XHR加载文件，然后使用类型化数组扫描文件以找到描述颜色格式的信息取决于格式。然后将类型化数组作为Blob传递 - ＆gt; object-URL作为图像加载，浏览画布并将每个像素转换为CMYK值。
但是从这一点来看，你将遇到与上述相同的问题，并且不会逃避编写文件编写器等。
答案 1 :(得分：1)
是的 - 基本上JavaScript能够确定png的颜色模式，但因此需要它 1.将png转换为base64 2.将base64转换为字节数组 3.读取/解析关于png规范的数组
可能的方法可能如下所示：
var PNG = {
parse: function(imgTag) {
var base64 = PNG.asBase64(imgTag);
var byteData = PNG.utils.base64StringToByteArray(base64);
var parsedPngData = PNG.utils.parseBytes(byteData);
return PNG.utils.enrichParsedData(parsedPngData);
},
asBase64: function(imgTag) {
var canvas = document.createElement("canvas");
canvas.width = imgTag.width;
canvas.height = imgTag.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(imgTag, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.split('base64,')[1];
},
utils: {
base64StringToByteArray: function(base64String) {
//http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript
var byteCharacters = atob(base64String);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
return new Uint8Array(byteNumbers);
},
parseBytes: function(bytes) {
var pngData = {};
//see https://en.wikipedia.org/wiki/Portable_Network_Graphics
//verify file header
pngData['headerIsValid'] = bytes[0] == 0x89
&& bytes[1] == 0x50
&& bytes[2] == 0x4E
&& bytes[3] == 0x47
&& bytes[4] == 0x0D
&& bytes[5] == 0x0A
&& bytes[6] == 0x1A
&& bytes[7] == 0x0A
if (!pngData.headerIsValid) {
console.warn('Provided data does not belong to a png');
return pngData;
}
//parsing chunks
var chunks = [];
var chunk = PNG.utils.parseChunk(bytes, 8);
chunks.push(chunk);
while (chunk.name !== 'IEND') {
chunk = PNG.utils.parseChunk(bytes, chunk.end);
chunks.push(chunk);
}
pngData['chunks'] = chunks;
return pngData;
},
parseChunk: function(bytes, start) {
var chunkLength = PNG.utils.bytes2Int(bytes.slice(start, start + 4));
var chunkName = '';
chunkName += String.fromCharCode(bytes[start + 4]);
chunkName += String.fromCharCode(bytes[start + 5]);
chunkName += String.fromCharCode(bytes[start + 6]);
chunkName += String.fromCharCode(bytes[start + 7]);
var chunkData = [];
for (var idx = start + 8; idx<chunkLength + start + 8; idx++) {
chunkData.push(bytes[idx]);
}
//TODO validate crc as required!
return {
start: start,
end: Number(start) + Number(chunkLength) + 12, //12 = 4 (length) + 4 (name) + 4 (crc)
length: chunkLength,
name: chunkName,
data: chunkData,
crc: [
bytes[chunkLength + start + 8],
bytes[chunkLength + start + 9],
bytes[chunkLength + start + 10],
bytes[chunkLength + start + 11]
],
crcChecked: false
};
},
enrichParsedData: function(pngData) {
var idhrChunk = PNG.utils.getChunk(pngData, 'IDHR');
//see http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html
pngData.width = PNG.utils.bytes2Int(idhrChunk.data.slice(0, 4));
pngData.height = PNG.utils.bytes2Int(idhrChunk.data.slice(4, 8));
pngData.bitDepth = PNG.utils.bytes2Int(idhrChunk.data.slice(8, 9));
pngData.colorType = PNG.utils.bytes2Int(idhrChunk.data.slice(9, 10));
pngData.compressionMethod = PNG.utils.bytes2Int(idhrChunk.data.slice(10, 11));
pngData.filterMethod = PNG.utils.bytes2Int(idhrChunk.data.slice(11, 12));
pngData.interlaceMethod = PNG.utils.bytes2Int(idhrChunk.data.slice(12, 13));
pngData.isGreyScale = pngData.colorType == 0 || pngData.colorType == 4;
pngData.isRgb = pngData.colorType == 2 || pngData.colorType == 6;
pngData.hasAlpha = pngData.colorType == 4 || pngData.colorType == 6;
pngData.hasPaletteMode = pngData.colorType == 3 && PNG.utils.getChunk(pngData, 'PLTE') != null;
return pngData;
},
getChunks: function(pngData, chunkName) {
var chunksForName = [];
for (var idx = 0; idx<pngData.chunks.length; idx++) {
if (pngData.chunks[idx].name = chunkName) {
chunksForName.push(pngData.chunks[idx]);
}
}
return chunksForName;
},
getChunk: function(pngData, chunkName) {
for (var idx = 0; idx<pngData.chunks.length; idx++) {
if (pngData.chunks[idx].name = chunkName) {
return pngData.chunks[idx];
}
}
return null;
},
bytes2Int: function(bytes) {
var ret = 0;
for (var idx = 0; idx<bytes.length; idx++) {
ret += bytes[idx];
if (idx < bytes.length - 1) {
ret = ret << 8;
}
}
return ret;
}
}
}
可以使用如下：
var pngData = PNG.parse(document.getElementById('yourImageId'));
console.log(pngData);
它包含一些信息，如颜色模式，块数，块本身，位深度等。
希望它有所帮助。
答案 2 :(得分：0)
您可以使用exifreader包读取图像元数据。
import ExifReader from 'exifreader'
const reader = new FileReader()
reader.onload = (event) => {
const metadata = ExifReader.load(event.target.result, { expanded: true })
const { file: { 'Color Components': { value } } } = metadata
switch (value) {
case 3: console.log('RGB'); break
case 4: console.log('CMYK'); break
default: console.log('Unknown')
}
}
reader.readAsArrayBuffer(instaceOfFileObject)
它不一定是File对象，但是ExifReader.load()希望将数组缓冲区作为其第一个参数。