Вставка изображения при создании документа docx с помощью officegen

@oxig · Регистрация: 10.06.2020

Студворк — интернет-сервис помощи студентам

Проект на vue. На странице создается изображение (график) с помощью объекта canvas. Задача такая: нужно отправить это изображение на сервер, где это изображение нужно добавить в создаваемый docx документ (officegen).

Можно на странице сохранить этот график в файл:

JavaScript
1
2
3
4
5
6
let canvasUrl = canvas.toDataURL("image/jpeg", 0.5)
const createEl = document.createElement('a')
createEl.href = canvasUrl
createEl.download = "download-this-canvas"
createEl.click()
createEl.remove()

А потом загрузить его на сервер и вставить в документ с помощью функции addImage(). Если параметром указать путь к файлу, который уже на сервере, понятно, как это сделать.
Но нельзя ли как-то проще, без использования файлов? Может быть, если передать на сервер напрямую значение canvasUrl, его тоже можно использовать для addImage?
Полученное значение переменной canvasUrl выглядит примерно так:

Code
1
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAG4AeADASIAAhEBAxEB/8QAGwABAQEAAwEBAAAAAAAAAAAAAAQDBQYHAgH/xABPEAABAwECBwcRBgYCAgMAAwAAAQIDBBETBRIUIVFTkgYxNEGTorEVFyM2QkNUYWNxc3SBgrLB0gciMlJy4TVFZIORoSXRJDNiwvAW8fL/xAAZAQEBAQEBAQAAAAAAAAAAAAAAAQMCBAX/xAAvEQEAAQIDBgUEAwEBAQAAAAAAAQIDESExBBITMpHwIkFRUrFhcaHRgcHhI0IU/9oADAMBAAIRAxEAPwDquA8DVOHax9LSviZI1iyKsrlRLEVE4kXShznW7wumdZ6NfNI+34R9mnbDP6q/42Hpx6rt2qmrCP69HMQ8ybuPVEe/M5IfuOjx1xnP9lubzGbdy0b6eVzHZ0VERVetrVXezWZ/GeiSYLppMe3HRzn4+MjrFRfEfLcEUbZGPbGqYtmbGWxbN5VMeJV6rg6B1u8L+EUXKv8ApHW7wv4RRcq/6T0F8LqirlRZ5o0YjURI3WJvH71P/q6vlP2...

Может быть, можно как-то использовать это значение, кроме как сохранить в файл jpg? Спасибо!

@DrType · 02.06.2024, 22:44

Нашел тут такой кот (видоизменил малость сообразно ситуации):

JavaScript
1
2
3
const data = canvasUrl.replace(/^data:image/\w+;base64,/, "");
const buffer = new Buffer(data, 'base64');
pptSlide.addImage(buffer,{y:yPos,cy:250,cx:250});

@oxig · 03.06.2024, 18:06 **[ТС]**

Большое спасибо! Получилось. Только почему-то вариант с таким регулярным выражением не работал, заменила на соответствующий объект RegExp.

@kidASM · 06.06.2024, 17:56

Такая реализация, - не лучшее решение. Тем более для Node.js.
Лучше когда пользователь сам подготавливает данные. Т.е. создаст docx-файл, добавит нужное данные, включая картинки, диаграммы, ... И уже готовый файл (и если нужно и дополнительные данные) отправит на сервер.
П.С. Делал визуальный редактор для создания PDF-файлов. Пока пользователь заполнял в форму (HTML/PDF) свои данные и подписывал их рукописной подписью (canvas) (всё это работало в браузере), сервер продолжал обработку запросов от других пользователей.
П.П.С. Всё что можно перенести на клиент, лучше перенести на клиент. Тем самым освободив ресурсы сервер и повысив производительность.

@pincet · 07.06.2024, 12:04

Сообщение от kidASM

П.П.С. Всё что можно перенести на клиент, лучше перенести на клиент. Тем самым освободив ресурсы сервер и повысив производительность.

или правильно организовать серверную часть)
и не делать толстого клиента)

@voraa · 07.06.2024, 14:59

Сообщение от kidASM

Всё что можно перенести на клиент, лучше перенести на клиент.

Апологеты SSR тебя камнями закидают.

Сервер можно и помощнее поставить. А вот заставить всех иметь мощные клиенты - проблематично.

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

Вставка изображения при создании документа docx с помощью officegen

Решение

Решение

@oxig 0 / 0 / 0 Регистрация: 10.06.2020 Сообщений: 2
	03.06.2024, 18:06 [ТС]
	Большое спасибо! Получилось. Только почему-то вариант с таким регулярным выражением не работал, заменила на соответствующий объект RegExp. 0

@kidASM 409 / 301 / 112 Регистрация: 28.08.2013 Сообщений: 788
	06.06.2024, 17:56
	Сообщение было отмечено gogolik как решение Решение Такая реализация, - не лучшее решение. Тем более для Node.js. Лучше когда пользователь сам подготавливает данные. Т.е. создаст docx-файл, добавит нужное данные, включая картинки, диаграммы, ... И уже готовый файл (и если нужно и дополнительные данные) отправит на сервер. П.С. Делал визуальный редактор для создания PDF-файлов. Пока пользователь заполнял в форму (HTML/PDF) свои данные и подписывал их рукописной подписью (canvas) (всё это работало в браузере), сервер продолжал обработку запросов от других пользователей. П.П.С. Всё что можно перенести на клиент, лучше перенести на клиент. Тем самым освободив ресурсы сервер и повысив производительность. 2