svgピクチャエクスポートピクチャを導入


文書ディレクトリ
  • 記事参照
  • SVGが描いた図形を画像
  • に変換する
  • svg導入ピクチャ表示
  • 記事リファレンス
  • JavaScriptを使用してsvgをピクチャフォーマット
  • にエクスポート
  • svgサブラベルImageによって導入されたピクチャは、どのようにピクチャを平らにすることができますか
  • SVGで描かれた図形を画像に変換
    /**
     *  svg     
     * @param node svg   => document.querySelector('svg')
     * @param name        
     * @param width        
     * @param height        
     * @param type        
     */
    export const covertSVG2Image = (node, name, width, height, type = 'png') => {
      let serializer = new XMLSerializer()
      let source = '\r
    '
    + serializer.serializeToString(node) let image = new Image() image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source) let canvas = document.createElement('canvas') canvas.width = width canvas.height = height let context = canvas.getContext('2d') context.fillStyle = '#fff' context.fillRect(0, 0, 10000, 10000) image.onload = function () { context.drawImage(image, 0, 0) let a = document.createElement('a') a.download = `${name}.${type}` a.href = canvas.toDataURL(`image/${type}`) a.click() } }

    svg画像表示の導入
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Documenttitle>
    head>
    <body>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1258px" height="960px">
            <image width="200" height="200" stroke="black" href="http://jtl3d.oss-cn-hangzhou.aliyuncs.com/contents/54c89316-bcf7-59f1-934b-9314429f5b7a/top.png">
            image>
        svg>
    body>
    html>