需要将svg转换成base64的jpg/png

发布时间 2023-09-25 15:53:08作者: _曾经沧海难为水
   /**
     * 
     * @param {string} fileName 下载的文件名
     * @param {string} fileType 需要转的文件类型 png/jpg
     * @param {string} svgstr 输入svg
     */
    function parseSvg(fileName, fileType, svgstr) {
      // 1、创建img
      var img = document.createElement('img')

      // 2、svg转base64
      img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgstr))))

      // 3、转指定格式
      img.onload = function() {
        // 1、创建canvas
        var canvas = document.createElement('canvas')
        var context = canvas.getContext('2d')

        canvas.width = img.width
        canvas.height = img.height

        // 2、根据base64生成canvas
        context.drawImage(img, 0, 0)

        // 3、canvas转字符串
        var canvasData = canvas.toDataUrl("image/" + fileType)
        // 此时的 canvasData 已经可以作为 img 的 src 进行png图片渲染 ,可以直接  return canvasData 得到: ‘data:image/png;base64,......’

        // 4、如果需要下载
        /* var imgDownload = document.createElement('img')
        imgDownload.setAttribute('src', canvasData)

        imgDownload.onload = function() {
          var a = document.createElement('a')
          a.download = fileName + '.' + fileType
          a.href = imgDownload.getAttribute('src')
          a.click()
        } */
      }
    }