- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
JavaScript 可以检查图像的颜色模式吗?
我为此做了很多搜索,但我唯一看到的是颜色模式转换(但转换希望您设置原始颜色模式)
我添加这个:--allow-file-access-from-files
以完全控制 Canvas 中的 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";
最佳答案
是的 - 基本上 JavaScript 能够确定 png 的颜色模式,但因此需要1.png转base642. 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);
它包含一些信息,如颜色模式、 block 数、 block 本身、位深度等。
希望对您有所帮助。
关于javascript - 如何在 Javascript 中获取图像颜色模式(CMYK、RGB ...),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37992117/
假设CMYK中定义了两种颜色: color1 = 30, 40, 50, 60 color2 = 50, 60, 70, 80 如果要打印它们,生成的颜色会有什么值? color_new = min(
我很难让 ImageMagick 的 identify 将 PDF 识别为 CMYK。 基本上,假设我正在使用 pdflatex 构建这个文件 test.tex: \documentclass[a4p
我使用此代码段在 javascript 中将 RGB 颜色转换为 CMYK: function RgbToCmyk(R,G,B) { if ((R == 0) && (G == 0) && (
将 CMYK eps 转换为 jpeg 时,Ghostscript 将颜色空间更改为 RGB。问题是在转换过程中保持颜色空间不变。提前谢谢。 最佳答案 假设您要将 EPS 中的任何 RGB 转换为 C
整整一个月,我一直在尝试找出如何加载 cmyk 图像(8 位 tiff)并进行 UCA、UCR、GCR 转换。 我知道这种转换的公式,但我在使用 C++ 或 C# 加载 cmyk 图像时遇到问题。 我
我有一个关于 C++ 颜色配置文件转换的项目,其中的想法是使用 CIELAB 作为 RGB 和所有其他(CMY;CMYK;HSV;HSL;...)之间的过渡。但我有一个大问题。我到处搜索,但找不到任何
我正在做一个项目,在那个项目中我需要能够: 获取一帧视频 将其更改为 CMYK 尝试渲染该帧 你们有什么建议吗? 为了获得帧,我想我可以使用 ffmpeg。 我认为写信的人 Android proce
我必须使用 RGB 值设置 div 的背景颜色。我可以通过这种方式。 现在,因为我也有 CMYK (0,1,0.5,0) 值,所以你能帮我用这些值实现相同的效果吗。 我这样做了,但是没有收获。
如何在 php 中将十六进制颜色值转换为等效的 CMYK 颜色值? 我想编写一个函数来执行此操作。但是我不知道如何将十六进制转换为 CMYK eg: 最佳答案 function hex2rgb($h
我需要在我的网页上使用 CMYK 颜色。有什么方法可以在 CSS 中使用 CMYK,或者可以使用 JavaScript 将 CMYK 转换为 RGB? 编辑: 我的意思是我有 CMYK 符号的颜色创建
将 CMYK 编码的颜色转换为其十六进制等效值的公式是什么? 最佳答案 我有一个坏消息要告诉你:没有简单的公式。青色、品红色和黄色是复杂的墨水颜色,转换为 RGB 取决于 colour profile
我想在不使用自动转换工具或库的情况下将缓冲图像从 RGBA 格式转换为 CYMK 格式,因此我尝试从使用 BufferedImage.getRGB() 获得的各个像素中提取 RGBA 值。这是我到目前
我知道 RGB 用于显示器,CMYK 用于打印,但我想在不进行任何转换的情况下使用 CMYK。我想上传 CMYK 图像 (jpeg) 并打印。但是当我使用 com.sun.image.codec.jp
我需要将 CMYK 图像转换为灰度 CMYK 图像。起初我以为我可以使用与 RGB -> 灰度转换相同的方法,比如 (R + G + B)/3 或 max(r, g, b)/2 + min(r, g,
众所周知,ie8 不支持 cmyk jpg 图像,它根本不渲染它们:-( 这是一篇关于它的帖子 http://www.plaveb.com/blog/cmyk-images-not-displayed
我想使用 java 打印机制绘制一些 Graphics2D 对象。所以我必须定义一个 Printable 的子类。 public class PrintCMYK() implements Printa
我可以使用 CMYK 格式设置位图中像素的颜色吗?还是必须将颜色转换为 RGB 值? 最佳答案 您需要先转换。以防万一您想知道它是如何完成的: R、G、B 值在 0..255 范围内给出。红色 (R)
我正在尝试使用 4 个 UISliders 来更改 CMYK 的值,然后在 View 中显示颜色,但我尝试了不同的公式,但仍然没有得到正确的值,所以我找到了这个 answer在堆栈溢出中但适用于 an
我正在尝试使用彩色按钮混合任何颜色组合,这些按钮输出特定的十六进制数字,并结合 Bootstrap 中的 slider ,允许用户指示他们想要使用的颜色百分比。 我无法让 slider 正常运行,我也
我正在从事一个项目,该项目要求我分离出 CYMK 图像中的每种颜色并生成将在特殊半色调打印机上打印的半色调图像。使用的方法类似于丝网打印,因为过程几乎相同。拍照并分解每个颜色 channel 。然后为
我是一名优秀的程序员,十分优秀!