js实现svg base64转png base64 (base64文件上传)

在vue中的代码：

methods: {
	onOK() {
		//调用转换方法 svgBase64为svgbase64的数据 格式：data:image/svg+xml;base64,..................
		let pngBase64Fun = this.svgBase64ToPngBase64(svgBase64);
		pngBase64Fun.then((res) => {
			// 将svg base64转 pngbase64后执行回调函数,res 为转换后的png base64
			this.$emit('callBack', res);//res数据 格式：data:image/png;base64,.......
		})
	},
	// 实现 svgBase64 转pngBase64核心代码
    async svgBase64ToPngBase64(imageBase64){
	  const img = new Image(); // 创建图片容器
	  img.src = imageBase64; //imageBase64 为svg+xml的Base64 文件流
		var promise = new Promise((reslove)=>{
			img.onload = function(){
			  // 图片创建后再执行，转Base64过程
			  const canvas = document.createElement('canvas');
			  canvas.width = 660;  //设置好 宽高  不然图片 不完整
			  canvas.height = 300;
			  const context = canvas.getContext('2d');
			  context.drawImage(img, 0, 0);
			  let pngBase64 = canvas.toDataURL('image/png');
			  reslove(pngBase64);
			}
		})
		return await promise;
	},
}

温馨提示 ： 如果是在uniapp中封装APP则转换方案不行，因为在APP中不支持 Image() 对象。可以上传到后台svg图片后，根据需要转png。

java 后台接收并转换成图片：

@ResponseBody
@PostMapping("/uploadSignImage")
public AjaxResult uploadSignImage(HttpServletRequest request){
    try{
        Long projectId = Long.parseLong(request.getParameter("projectId"));
        Long signUserId = Long.parseLong(request.getParameter("signUserId"));
        String pngBase6 = request.getParameter("imgBase64");
        // 签名文件的路径
        String filePath = RuoYiConfig.getUploadPath()+"/"+DateUtils.datePath();
        File dir = new File(filePath);
        if(!dir.exists())
        {
            dir.mkdirs();
        }
        String signedFileName = "sign"+projectId+".png";
        String existFileUrl = ImageUtils.GenerateImage(pngBase6, filePath+"/"+ signedFileName);
        if(StringUtils.isNotEmpty(existFileUrl))
        {
            int dirLastIndex = RuoYiConfig.getProfile().length() + 1;
            String currentDir = StringUtils.substring(existFileUrl, dirLastIndex);
            String signedFileUrl = serverConfig.getUrl() + Constants.RESOURCE_PREFIX + "/" + currentDir;
            //更新数据库逻辑
            // if(res>0)
            // {
            //     return AjaxResult.success("图片上传成功！");
            // }
            return AjaxResult.success("图片上传成功！");
        }
        return AjaxResult.error("图片上传失败，请稍后重试！");
    }catch (Exception e) {
        e.printStackTrace();
        return AjaxResult.error("图片上传失败，请稍后重试！");
    }
}

ImageUtils.java 工具类

/**
 * 对 png Base64解码并转成图片
 * @param imgData
 * @param imgFilePath
 * @return
 * @throws IOException
 */
public static String GenerateImage(String imgData, String imgFilePath) throws IOException { // 对字节数组字符串进行Base64解码并生成图片
    if (imgData == null) // 图像数据为空
        return null;
    imgData = imgData.replace("data:image/png;base64,","");
    BASE64Decoder decoder = new BASE64Decoder();
    OutputStream out = null;
    try {
        out = new FileOutputStream(imgFilePath);
        // Base64解码
        byte[] b = decoder.decodeBuffer(imgData);
        for (int i = 0; i < b.length; ++i) {
            if (b[i] < 0) {// 调整异常数据
                b[i] += 256;
            }
        }
        out.write(b);
    } catch (FileNotFoundException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
        return null;
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
        return null;
    } finally {
        out.flush();
        out.close();
        return imgFilePath;
    }
}