Comentário: Você precisa usar parte da página da web como o texto principal, converter a página da web original em PDF como um anexo, enviar um email para o chefe, converter SVG em tela para exibi -lo, mas depois encontrou que a tela não pode exibi -la normalmente; portanto, no final, você deve converter a tag de tela no formato da imagem novamente
Recentemente, é necessário colocar parte do conteúdo da página da web no texto principal, converter a página da web original em um PDF como um anexo e enviar um email para o chefe. Como somos um site do tipo relatório, no HTML5, o desenvolvimento do controle nada mais é do que tela ou SVG. Aqui temos vários controles que usam SVG, e o SVG não pode ser exibido normalmente no corpo de e -mail Foxmail, por isso consideramos a conversão de SVG em tela para exibir, mas depois descobrimos que a tela não pode ser exibida normalmente. No final, não tivemos escolha a não ser converter a tag de tela em formato de imagem novamente, que finalmente resolveu esse problema. Vamos apresentar brevemente o processo de implementação abaixo. A seguir é uma tag SVG<div>
<svg> </svg>
</div>
Primeiro, você precisa obter a tag SVG e o conteúdo:
var svghtml = svgContainer.innerhtml ();
A conversão do SVG em tela requer um canis de plug -in do Google. Você pode baixá -lo no site oficial ou referenciá -lo diretamente remotamente.
Em seguida, ligue para o método Canvg (Canvasid, Svghtml) do plug-in para convertê-lo em tela. O primeiro parâmetro deste método é o ID da tag de tela, e o segundo é naturalmente o conteúdo da tag SVG. Dessa forma, o SVG é convertido em tela
Em seguida, converta tela em fotos, o que é mais fácil
var iMgsrc = document.getElementById (Canvasid) .todataurl (imagem/png); // Isso está realmente convertendo tela em uma imagem e retornando todos os dados de conteúdo da imagem, como segue para exibir a imagem:
<img src = imgsrc />
É assim que implementá-lo da imagem SVG-> Canvas->. Isso ainda é muito útil porque diferentes navegadores suportam diferentes SVG e tela. Dessa forma, pelo menos nossos controles sempre poderão ser exibidos corretamente, mesmo que possamos usar apenas imagens no final.