首页 > 其他分享 >需要将svg转换成base64的jpg/png

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

时间:2023-09-25 15:57:38浏览次数:30  
标签:canvas img svg base64 jpg var png

   /**
     * 
     * @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()
        } */
      }
    }

 

标签:canvas,img,svg,base64,jpg,var,png
From: https://www.cnblogs.com/shiyiersan/p/17728086.html

相关文章

  • golang 对字符串进行base64编解码、md5 编码
    内容来自对chagpt的咨询一、对字符串进行base64编解码base64编码要在Go语言中对字符串进行base64编码,你可以使用标准库中的encoding/base64包。以下是一个简单的示例:packagemainimport( "encoding/base64" "fmt")funcmain(){ data:="Hello,World!" enc......
  • 字符串转16进制,16进制转Base64 哈哈哈 uf65/rn+
    测试:哈哈哈uf65/rn+场景描述:对接java接口,字符串转16进制再转base64;遇到转换不一样问题;后来定位对方编码格式不对; privatevoidTest(){stringstr="哈哈哈";str=GetHexByString(str,Encoding.GetEncoding("GB18030"));//Encodi......
  • delphi Base64转换(加密、解密)
    Base64转换(加密、解密)代码字符串加密、解密usesSystem.NetEncoding;procedureTForm1.Button1Click(Sender:TObject);varstr1,str2:string;begin//加密str1:=TNetEncoding.Base64.Encode('测试数据');Memo1.Lines.Add('加密数据'+str1);//解密s......
  • File文件流与base64图片格式转换
    //base64转文件exportfunctionbase64ToFile(base64:any,fileName:string){if(!base64)returnletdata=base64.split(',');lettype=data[0].match(/:(.*?);/)[1];constbstr=window.atob(data[1]);letn=bstr.length;constu8arr=......
  • 封装Svg
    1、npmivite-plugin-svg-icons  npmifast-glob  2、在assets下创建svg目录  找想要的图标复制svg代码放到svg在vite.config.js配置:import{createSvgIconsPlugin}from'vite-plugin-svg-icons'//在plugins中添加 createSvgIconsPlugin({ iconDirs:[resol......
  • svg
    svg>元素:它是SVG图形的容器,用于定义SVG文档的命名空间、版本、视口等属性。circle>元素:它用于绘制一个圆形,可以指定圆心的坐标和半径。rect>元素:它用于绘制一个矩形,可以指定矩形的位置、大小、圆角等属性。polygon>元素:它用于绘制一个多边形,可以指定多边形的顶点坐标。path>......
  • 【java基础】Token令牌生成 token加密串 生成token Aes加密 Base64加密 JWT 【附
    先看效果:Token令牌-生成工具包括:头部(header)+载荷(payload)+签证(signature) 可以自定义加密盐: 源码:地址一:GitLab地址二:123盘地址三:百度盘提取码:666 ......
  • TypeScript编码解码Base64
    constBase64={  _keyStr:'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',  _utf8_encode:function(string:string){    string=string.replace(/\r\n/g,'\n')    letutftext=''    ......
  • 【前端攻略】:玩转图片Base64编码
    【前端攻略】:玩转图片Base64编码    引言图片处理在前端工作中可谓占据了很重要的一壁江山。而图片的base64编码可能相对一些人而言比较陌生,本文不是从纯技术的角度去讨论图片的base64编码。标题略大,不过只是希望通过一些浅显的论述,让你知道什么是图片的base64......
  • 如何通过 <use> 元素(如图像)调整 SVG 图标的大小
    要通过<use>元素来调整SVG图标的大小,可以使用CSS的width和height属性或者transform属性来实现。方法一:使用CSS的width和height属性<svg><usexlink:href="icon.svg#icon-name"></use></svg>svg{width:24px;/*设置图标宽度*/height:24px;/*设置图标高度*/}通过......