之前做了一个svg简易的编辑器!有个需求将编辑器编辑好的svmXml代码转成图片然后上传到图片服务器!在网上招了好多的例子!发现大部分都要用到第三方的js插件!所以为了方便就自己写了个简单点的!下面分享出来!也算自己的一个笔记吧!
直接上页面部分代码:
div中就是你的svg xml了
<div id="svgCode"> </div>
这部分是获取svgxml并将它转成base64码. fstrImage 获取到的地址是可以访问的,就是一张svg生成的base64图片
var image = new Image();
var svgXml = $("#svgCode").html();
var img = new Image();
var svg = new Blob([svgXml], {type: "image/svg+xml;charset=utf-8"});
var fstrImage = "";
var imageBase64 = "";
var DOMURL = self.URL || self.webkitURL || self;
img.src = DOMURL.createObjectURL(svg);
img.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
fstrImage = canvas.toDataURL();
imageBase64 = fstrImage.split(',')[1];
}
生成base64图片地址之后需要把它上传指定的路径
// svgxml svg代码
// uploadFilePath 上传的路径包含文件名称
SvgUtils.base64ToJpg(svgxml,uploadFilePath);
// base64字符串转化成图片
public static void base64ToJpg(String svgxml, String uploadFilePath){
BASE64Decoder decoder = new BASE64Decoder();
try {
// Base64解码
byte[] b = decoder.decodeBuffer(svgxml);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {// 调整异常数据
b[i] += 256;
}
}
// 生成jpeg图片
// String imgFilePath = filePath;// 新生成的图片
OutputStream out = new FileOutputStream(uploadFilePath);
out.write(b);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
开发中记录!