在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;
}
}