URL-адреса данных – это полезная функция, предоставляемая браузерами.
У нас может быть изображение, которое вместо ссылки на файл файловой системы, например
он встраивает изображение в сам HTML, что-то вроде этого:
где часть мусор , состоящая из, казалось бы, случайных букв и цифр, очень длинная.
Я играл с API Canvas для динамического создания изображения, и я наткнулся на метод toDataURL() объекта Canvas:
canvas.toDataURL()
Я думаю, что это особенно полезно, когда вы создаете изображение на стороне сервера и хотите разместить его на веб-странице, созданной на стороне сервера.
Все из Node.js процесс.
В частности, с помощью пакета canvas npm мы можем инициализировать холст:
const { createCanvas, loadImage } = require('canvas')
const canvas = createCanvas(200, 200)
const ctx = canvas.getContext('2d')нарисуйте в нем, используя, например, ctx.fillText("Привет, мир!", 50, 100) а затем вызовите холст.toDataURL() для создания URL-адреса данных для изображения, которое мы затем можем добавить в HTML в виде строки, например:
const imageHTML = ''
Конечно, вы можете сделать то же самое на интерфейсе, за исключением того, что теперь объект canvas является ссылкой на HTML-элемент, на который вы рисуете:
const canvas = document.getElementById('canvas')
//…
const imageHTML = ''Оригинал: “https://flaviocopes.com/node-print-canvas-to-data-url/”