Discover how to export html and svg as images

The author has open sourced a Web mind map ^[1], and made many detours when exporting it to pictures, so I will record it through this article.

The nodes and connections of the mind map are all rendered through svg. As a pure js library, we do not consider implementing it through the backend, so we can only think about how to do it through Pure front-end method to convert svg or html into images.

Use img tag combined with canvas to export

We all know that the img tag can display svg, and then canvas can render img, so is it just a matter of adding < Just render code>svg into the img tag, and then export it as a picture through canvas. The answer is yes.

const svgToPng = async (svgStr) => {
    //Convert to blob data
    let blob = new Blob([svgStr], {
      type: 'image/svg + xml'
    })
    //Convert to data:url data
    let svgUrl = await blobToUrl(blob)
    //Draw to canvas
    let imgData = await drawToCanvas(svgUrl)
    // download
    downloadFile(imgData, 'picture.png')
}

svgStr is the svg string to be exported, for example:

Then create a blob data of type image/svg + xml through the Blob^[2] constructor, and then use the blobData is converted into data:URL:

const blobToUrl = (blob) => {
    return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.onload = evt => {
            resolve(evt.target.result)
        }
        reader.onerror = err => {
            reject(err)
        }
        reader.readAsDataURL(blob)
    })
}

In fact, it is a string in base64 format.

Next, you can load it through img and render it into canvas for export:

const drawToCanvas = (svgUrl) => {
    return new Promise((resolve, reject) => {
      const img = new Image()
      // Cross-domain images need to add this attribute, otherwise the canvas will be contaminated and the image cannot be exported.
      img.setAttribute('crossOrigin', 'anonymous')
      img.onload = async () => {
        try {
          let canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          let ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0, img.width, img.height)
          resolve(canvas.toDataURL())
        } catch (error) {
          reject(error)
        }
      }
      img.onerror = e => {
        reject(e)
      }
      img.src = svgUrl
    })
}

The canvas.toDataURL() method also returns a data:URL string in base64 format:

Finally, you can download it through the a tag:

const downloadFile = (file, fileName) => {
  let a = document.createElement('a')
  a.href = file
  a.download = fileName
  a.click()
}

The implementation is very simple and the effect is good, but is this okay? Next, let’s insert two pictures to try.

Handling the situation where images exist

The first image is inserted using the data:URL method of base64, and the second image is inserted using the ordinary url:

The export results are as follows:

As you can see, there is no problem with the first picture, but the second picture is cracked. Maybe you think it is a problem with the same-origin policy, but in fact, if you change it to a picture with the same origin, it is also cracked. The solution is very simple, traverse svg node tree, just convert the images into the form of data:URL:

//The @svgdotjs/svg.js library is used to operate svg
const transfromImg = (svgNode) => {
    let imageList = svgNode.find('image')
    let task = imageList.map(async item => {
      // Get image url
      let imgUlr = item.attr('href') || item.attr('xlink:href')
      // Already in the form of data:URL, no need to convert
      if (/^data:/.test(imgUlr)) {
        return
      }
      // Convert and replace image url
      let imgData = await drawToCanvas(imgUlr)
      item.attr('href', imgData)
    })
    await Promise.all(task)
    return svgNode.svg()// Return svg html string
}

The previous drawToCanvas method is used here to convert the image into data:URL, so the export is normal:

At this point, converting pure svg into images is basically no problem.

Handling the presence of foreignObject tag

svg provides a foreignObject tag that can be inserted into html nodes. In fact, the author uses it to achieve the rich text editing effect of nodes:

Next, use the previous method to export. The results are as follows:

It clearly shows that there is no problem, but the content of foreignObject is offset when exporting. Why is this? In fact, it is because of the default style problem. The page clears margin and padding, and set box-sizing to border-box:

Then there is no problem when svg exists in the document tree, but the svg string is used when exporting, which is separated from the document, so there is no style coverage. Then there will naturally be problems with the display. Knowing the reason, there are two solutions. One is to traverse all embedded html nodes and manually add inline styles. Be sure to give all html< Adding all /code> nodes, only adding svg, foreignObject or the outermost html node will not work; the second is Directly add a style tag in the foreignObject tag, add styles through the style tag, and only need to give one of the foreignObject tag. There are two methods, whichever you like. I use the second one:

const transformForeignObject = (svgNode) => {
    let foreignObjectList = svgNode.find('foreignObject')
    if (foreignObjectList.length > 0) {
        foreignObjectList[0].add(SVG(`<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        </style>`))
    }
    return svgNode.svg()
}

import { SVG, ForeignObject } from '@svgdotjs/svg.js'

let html = `<div>Node text</div>`
let foreignObject = new ForeignObject()
foreignObject.add(SVG(html))
g.add(foreignObject)

import html2canvas from 'html2canvas'

const useHtml2canvas = async (svgNode) => {
    let el = document.createElement('div')
    el.style.position = 'absolute'
    el.style.left = '-9999999px'
    el.appendChild(svgNode)
    document.body.appendChild(el)//html2canvas conversion The nodes that need to be converted are in the document
    let canvas = await html2canvas(el, {
        backgroundColor: null
    })
    mdocument.body.removeChild(el)
    return canvas.toDataURL()
}

import domtoimage from 'dom-to-image'

const dataUrl = domtoimage.toPng(el)

foreignObject.add(document.createElemnt('div'))