将图像绘制到 canvas 更改颜色

Question

我尝试将此图像绘制到 canvas。 https://res.cloudinary.com/casestry-com/image/upload/casestry-studio/render/14PMT/p1/black/2500x3000/gloss_mask.png在我的本地，我检查了 (551, 1439) 处的 rgb 颜色是 (18, 255, 255) 但是当我将图像绘制到 canvas 后得到颜色时，颜色变为 (9, 255, 255) 绘制到 canvas 后有什么方法可以得到相同的颜色？

这是小提琴： https://jsfiddle.net/badu3ze6/5/

async function getImage(url) {
  const imageLoadPromise = new Promise((resolve) => {
    const image = new Image();
    image.crossOrigin = "Anonymous";
    image.src = url;
    image.onload = () => {
      resolve(image);
    };
  });
  return imageLoadPromise;
}
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
async function loadImage() {
    const img = await getImage("https://res.cloudinary.com/casestry-com/image/upload/casestry-studio/render/14PMT/p1/black/2500x3000/gloss_mask.png");
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  const data = ctx.getImageData(551, 1439, 1, 1).data;
  try{
    console.log('read by canvas:', [data[0], data[1], data[2]])
  } catch (e) {
    console.log(e);
  }
}

async function readByImageJs() {
    let image = await IJS.Image.load("https://res.cloudinary.com/casestry-com/image/upload/casestry-studio/render/14PMT/p1/black/2500x3000/gloss_mask.png");
  console.log('read by imagejs:', image.getPixelXY(551, 1439));
}

loadImage()
readByImageJs();

Answer 1

问题是您的图像确实声明了 ICC 颜色配置文件，但没有嵌入它。
Chrome 和 Firefox 都会窒息，显然是在颜色配置文件实际设置为 sRGB (IEC61966-2.1) 时试图从某些东西转换为sRGB 。 （请注意， Safari 确实返回与image-js相同的值）。

如果您的图像嵌入了颜色配置文件，那么 Firefox 和 Chrome 也可以对其进行解码。 如果您的图像被声明为没有颜色配置文件的 RGB，他们也能够正确处理它。

如果你不能修改你的图片，你也可以通过createImageBitmap()方法和它的colorSpaceConversion选项来强制浏览器不要尝试管理图片的颜色：

 const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); async function loadImage() { const resp = await fetch("https://res.cloudinary.com/casestry-com/image/upload/casestry-studio/render/14PMT/p1/black/2500x3000/gloss_mask.png") const blob = await resp.blob(); const img = await createImageBitmap(blob, { colorSpaceConversion: "none" }); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); const data = ctx.getImageData(551, 1439, 1, 1).data; try { console.log('read by canvas:', [data[0], data[1], data[2]]) } catch (e) { console.log(e); } } async function readByImageJs() { let image = await IJS.Image.load("https://res.cloudinary.com/casestry-com/image/upload/casestry-studio/render/14PMT/p1/black/2500x3000/gloss_mask.png"); console.log('read by imagejs:', image.getPixelXY(551, 1439)); } loadImage() readByImageJs();

 <span id="pixel"></span> <canvas id="myCanvas" width="400" height="400" style="border:1px solid grey"></canvas> <script src="https://www.lactame.com/lib/image-js/0.21.2/image.min.js"></script>