Экспорт диаграммы. js в диаграмму фиксированного размера - PullRequest
0 голосов
/ 05 марта 2020

Я пытаюсь получить изображение (например, png) из диаграммы, нарисованной с помощью диаграммы. js. Идея состоит в том, чтобы отправить это изображение в бэкэнд, чтобы затем включить его в большой отчет.

Создать изображение из холста диаграммы довольно просто - я могу сделать что-то вроде

var canvas = document.getElementById('canvasIwantToRenderForTheBackend');
canvas.toDataURL("image/png");
// or
canvas.getImageData();

Проблема, с которой я столкнулся, заключается в том, что это заставит изображение диаграммы выглядеть так, как оно выглядит в момент создания отчета пользователем.

Мне нужно создать холст фиксированного размера, нарисовать диаграмма там и экспорт этого холста в изображение - в основном я не хочу, чтобы изображение было сжато только потому, что пользователь уменьшил окно браузера, и оно выглядит сжатым в браузере (диаграмма js пытается заставить диаграмму выглядеть «приятно» в сжатой рамке он получает). Также я не хочу, чтобы холст, который видит пользователь, изменял размеры или делал странные вещи.

ps: я попытался сделать копию холста, которую я не добавляю в DOM, изменил ее размер и затем генерировать изображение из этого - но это как-то просто пустое изображение. На самом деле, я попытался просто манипулировать шириной холста в консоли браузера, и диаграмма исчезла

pps: обратите внимание, что я не хочу изменять размер изображения - я могу это сделать, я хочу изменить размер холст, где диаграмма js dr aws диаграмма, потому что в зависимости от размера холста диаграмма выглядит по-разному - я хочу, чтобы полученное изображение не зависело от того, что видит пользователь сейчас.

1 Ответ

0 голосов
/ 06 марта 2020

Решение, которое я использую, заключается в создании моего холста фиксированного размера в DOM, но я размещаю его за пределами видимого экрана.

В основном я помещаю холст, который хочу использовать, чтобы визуализировать из него изображение внутри следующего div

<div style="position: absolute; left: -2000px">
 <canvas id="canvasIwantToRenderForTheBackend" <!-- here go all the attrs I want to use for this canvas--> ></canvas>
</div>

Таким образом, диаграмма js вынуждена фактически отобразить диаграмму на этом холсте.

...