Генерация в TypeScript с цветом, с и высотой строки base64

Question

Я пытаюсь выяснить, могу ли я сгенерировать код base64 со следующими 3 значениями: color, width, height.(Без внешних гигантов npm lib) Я встречал только библиотеку с именем base64-js.однако мне не нужно большинство функций.

Редактировать: Спасибо Виктору.я немного редактирую его код, и результат:

convertToDataURLViaCanvas(outputFormat, width, height, color) {
    return new Promise((resolve) => {
        let canvas = <HTMLCanvasElement>document.createElement('CANVAS');
        canvas.height = height;
        canvas.width = width;
        const ctx = canvas.getContext('2d');

        // fill the entire canvas with color
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        let dataURL = canvas.toDataURL(outputFormat);
        // callback(dataURL);
        canvas = null;
        resolve(dataURL);
    });
}

Работает как шарм.Спасибо за это!

Answer 1

Как сказал @HB, div должно быть достаточно для такого заполнителя.Однако, если вам нужно изображение в кодировке Base64, вы можете получить его, используя canvas.toDataURL():

function insertPlaceholder(color, width, height) {
    const canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        img = new Image();

    canvas.width = width;
    canvas.height = height;

    ctx.fillStyle = color;
    ctx.fillRect(0, 0, width, height);

    img.src = canvas.toDataURL(); //-> data:image/png;base64,iVBORw0K...
    document.body.appendChild(img);
}

Использование:

insertPlaceholder('red', 250, 250);

Answer 2

Base64 - это просто кодировка, которая не обязательно связана с изображениями.Если вам просто нужен заполнитель, я бы порекомендовал не добавлять изображение до тех пор, пока оно не будет загружено, и отображать вместо него размер div.

Если вам действительно нужно изображение, вы можете просто сделать исходный код SVG,который вам даже не нужно кодировать в Base64, потому что его данные уже текстовые.Итак, это выглядит примерно так:

data:image/svg+xml;utf8,<svg ... >

Тогда вам просто нужно установить соответствующие свойства, чтобы изменить его размер и добавить цвет.

const addImage = (width, height, color) =>
{
  const image = document.createElement('img');
  image.src = `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="${width}px" height="${height}px">
    <rect width="100%" height="100%" fill="${color}"/>
  </svg>`;
  document.body.appendChild(image);
}

addImage(200, 100, 'red');