Комментарий: Вам нужно использовать часть веб -страницы в качестве основного текста, преобразовать исходную веб -страницу в PDF в качестве вложения, отправить электронное письмо боссу, преобразовать SVG в холст, чтобы отобразить ее, но позже обнаружил, что холст не может отображать его нормально, поэтому вы должны снова преобразовать тег Canvas в формат изображения снова, поэтому вы должны снова преобразовать тег в формате изображения.
В последнее время необходимо поместить часть содержания веб -страницы в основной текст, преобразовать исходную веб -страницу в PDF в качестве вложения и отправить электронное письмо боссу. Поскольку мы являемся веб-сайтом типа отчета, в HTML5, разработка управления-не более чем Canvas или SVG. Здесь у нас есть несколько элементов управления, которые используют SVG, и SVG не может быть отображается нормально в корпусе электронной почты Foxmail, поэтому мы рассматривали возможность преобразования SVG в холст для отображения, но позже мы обнаружили, что холст не может отображаться нормально. В конце концов, у нас не было выбора, кроме как снова преобразовать тег Canvas в формат изображения, что, наконец, решило эту проблему. Давайте кратко представим процесс реализации ниже. Ниже приведен тег SVG<div>
<svg> </svg>
</div>
Во -первых, вам нужно получить тег и контент SVG:
var svghtml = svgcontainer.innerhtml ();
Преобразование SVG в Canvas требует Canvg Google. Вы можете скачать его на официальном веб -сайте или напрямую ссылаться на него удаленно.
Затем вызовите метод подключаемого модуля CANVG (Canvasid, Svghtml), чтобы преобразовать его в Canvas. Первым параметром этого метода является идентификатор тега Canvas, а второй, естественно, является содержанием тега SVG. Таким образом, SVG преобразуется в холст
Затем преобразуйте холст в картинки, что проще
var imgsrc = document.getElementbyId (canvasid) .todataurl (image/png); // Это фактически преобразует холст в изображение и возвращает все данные содержимого изображения, следующим образом, чтобы отобразить изображение:
<img src = imgsrc />
Вот как реализовать его из SVG-> Canvas-> Image. Это все еще очень полезно, потому что разные браузеры поддерживают разные SVG и холст. Таким образом, по крайней мере наши элементы управления всегда смогут отображать правильно, даже если мы можем использовать только изображения в конце.