Что я делаю, это преобразование диаграммы (HTML для обозначения диаграммы + SVG для тела диаграммы), сгенерированное D3.js в изображение, сейчас я использую как html2canvas, так и вручную конвертирую SVG в данные изображения, причина в том, что html2canvas может обрабатывать только часть html и текстовый элемент внутри SVG.Как объединить два изображения в один?
Так что мой вопрос:
После того, как у меня есть как данные изображения (SVG часть как: 'data:image/svg+xml;base64,'+ btoa(svg); (я могу превратить его в аналогичные данные для URL, создавая изображение объекта и нарисовать его на холсте) и HTML часть из canvas.toDataURL), как я могу объединить их вместе, чтобы получить полное изображение
/////////////// /////////////// ///////////////
/ / /////////////// / /
/ / /////////////// / /
/ / + /////////////// = / /
/////////////// /////////////// ///////////////
/////////////// / / / /
/////////////// /////////////// ///////////////
Я думаю, canvas может иметь способность (режим наложения) объединить многослойные слои, но я не могу понять, как это сделать. Поэтому оценивается любой пример кода.
SVG является векторным форматом, что именно вы считаете слияние? Плуг одного изображения поверх другого? – user2867288
@ user2867288 В принципе Да. Как я уже сказал, у меня есть два изображения, у одного есть часть тела диаграммы, а у другой - часть легенды, я хочу собрать их, чтобы получить изображение, имеющее как диаграмму, так и легенду. В настоящее время проблемы с холстом: [1] Я не знаю, чтобы перекрывать слои (например, слои Photoshop) [2] Эти два изображения могут иметь одну и ту же часть (например, ось диаграммы), но не в том же месте (10px diff при сравнении их, это звучит смешно, но когда это правда.) Мне нужно удалить эту часть в нижнем слое и использовать только верхний слой. – Kuan