Сколько памяти занимает холст размером 100*100?

внешний интерфейс программист опрос Canvas

Оригинальный текст из моего блога на github

тема

Сколько памяти занимает холст размером 100*100?

существуетТри года фронтенда, интервьюЯ упомянул очень инновационную тему, и здесь я поделюсь ходом мыслей во время интервью.

Идеи решения проблем

На самом деле, я не знаю, насколько реален ответ.Во время интервью интервьюер не ожидает точного ответа, а зависит от вашего мыслительного процесса.

Если вы знакомы с Canvas и работали с фильтрами, возможно, вы вызывалиimageData = ctx.getImageData(sx, sy, sw, sh);этот API. Я помню, что этот API возвращает массив ImageData, содержащий пиксельные данные прямоугольника, представленного sx, sy, sw, sh.

И этот массив имеет тип Uint8, и четыре бита представляют собой пиксель.

Я могу вспомнить эту информацию только во время интервью. Предположим, когда мы определяем цвет, мы используем rgba(r,g,b,a) для представления четырех измерений, и каждое значение пикселя представлено шестнадцатью битами 00-ff, то есть диапазон каждого измерения составляет 0 ~ 255, то есть 2^8 бит, то есть 1 байт, то есть диапазон, который может представлять Uint8.

Таким образом, память, занимаемая холстом 100 * 100, составляет 100 * 100 * 4 байта = 40 000 байт.

утверждение

Ответы здесь не обязательно точны.

Альфа дебаты

Некоторые студенты указали, что альфа не 0-100? Сначала у меня был тот же вопрос, но в этой статьеdeveloper.Mozilla.org/en-US/docs/…Сказать

The data property returns a Uint8ClampedArray which can be accessed to look at the raw pixel data; each pixel is represented by four one-byte values (red, green, blue, and alpha, in that order; that is, "RGBA" format). Each color component is represented by an integer between 0 and 255.

То есть даже альфа 0-255

Итак, как представить альфу?

В следующем фрагменте кода

Видно, что вам нужно использовать только 0-255 для представления 0-100~.

использованная литература

CanvasRenderingContext2D.getImageData() возвращает объект ImageData, который используется для описания пиксельных данных, подразумеваемых областью холста.Эта область представлена ​​прямоугольником, начальная точка (sx, sy), ширина sw, высота ш.

Uint8ClampedArray описывает одномерный массив, содержащий данные в порядке RGBA, представленном целыми числами от 0 до 255 (включительно).

найм

Ant Financial - Micro Loan Business Group Recruitment Front-end Вы можете отправить свое резюме наyanqi.zyq@antfin.comТема письма: резюме-имя-интерфейс Прикрепите свое резюме

Категории