Почему я не могу использовать new Image() в Nuxt 3?

Question

[Айнур Ярулин]

Здравствуйте, у меня есть вот такая функция, она получает цвет пикселя из края изображения:

function getPixel(url, x, y) {
  var img = new Image();
  img.src = url;
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  context.drawImage(img, 0, 0);
  return context.getImageData(x, y, 1, 1).data;
}

Но в Nuxt 3 она не работает, в консоли пишет Image из not defined, как можно решить проблему?

Answer 1

[Айнур Ярулин]

Решил проблему. Для создания canvas и imgae я использовал библиотеку canvas,

import { createCanvas, loadImage } from 'canvas'

const image = await loadImage("https://рандомныйсайт/img.jpg", {
  crossOrigin: "anonymous"
})

const canvas = createCanvas(500, 500)
const context = canvas.getContext('2d')
context.drawImage(image, 0, 0, canvas.width, canvas.width)
const pixelData = context.getImageData(1, 1, 1 ,1)

Ключевым моментом является именно crossOrigin: "anonymous".
Отсутствие данных, какие настройки могут передаваться в поле options у метода loadImage()вводит в заблуждение.

Answer 2

[Алексей Ярков]

как можно решить проблему?

Не вызывать функцию там где Image из not defined

Comments

[Айнур Ярулин]

Алексей Ярков, вы не знаете как можно получить цвет края изображения в Nuxt? Никак не получается

[Алексей Ярков]

Айнур Ярулин, почему я смог нагуглить вашу проблему с первой попытки, а вы нет?

https://github.com/edi9999/jsqrcode/issues/17#issu...

[Айнур Ярулин]

Алексей Ярков, да я уже двигаюсь в этом направлении, я написал вот такой код:

import { createCanvas, loadImage } from 'canvas'

const canvas = createCanvas(500, 500)
const ctx = canvas.getContext('2d')
const image = await loadImage('https://site/img.jpg')
ctx.drawImage(image, 0, 0, canvas.width, canvas.height)

console.log(ctx.getImageData(1, 1, 1, 1))
// но вот тут выскакивает ошибка корс, я пока что не понимаю что с ней делать

Я плюс минус понимаю что такое Сors, но не знаю как решить эту проблему

[Айнур Ярулин]

Алексей Ярков, суть функции - просто получить цвет, чтобы покрасить карточку, например если картинка розовая, то цвет карточки тоже розовый, не понимаю почему это так трудно сделать