SVG转Canvas并添加背景图片进行上传
SVG是什么
SVG是很早之前就出来的通过xml格式来定义并渲染矢量图片的一种方式,因为是类似Dom节点的格式,所以xml节点可以像Dom一样,可以通过js或者jQuery直接获取并修改。好处就是因为是矢量图,所以放大缩小不失真,一般地图开发中使用最多。
Canvas是什么
Canvas就是一张画布,只有width,height,id这3个属性,其他只能通过js来改变,通过调用js api来画图,这是H5发布后新增的。
SVG图片上传
一般svg绘制的图片直接上传不了,要转换到base64数据才能上传.
网上很多介绍canvg.js来进行svg转变成canvas,然后canvas通过toDataURL再转变成blob进行上传的,如果没有背景图片需求,这样是完全没问题的,但是如果canvas需求背景图片的话,因为toDataURL方法不认为canvas的css属性background-image是数据内容的一部分,所以toDataURL转换后的blob信息没有背景图片,不是黑的就是白的。
Canvas带背景图片上传
toDataURL信息想要带背景图片的话,一定要使用drawImage来进行绘画,所以canvas想要带背景图片的,可以使用drawImage来先绘制背景图片,然后在绘制其他图片内容。
SVG带背景图片上传
所以svg想要带背景图片上传的话,就可以利用drawImage重载方法支持image,canvas来通过2个canvas来实现, canvas1先画背景图片,canvas2是通过canvg.js转换svg来得到的,这样以后,canvas1再继续绘制canvas2。最后canvas转blob进行图片上传,这样就可以实现svg带背景图片上传了。
参考代码如下:
var image_url = 'http://xxxxxxx/image/xxxx/test.jpg';
var svgXml = $('#svg_container').html(); //获取svg标签字符串内容
var bg_image = new Image(); //先画原来图片当作背景
bg_image.src = image_url; //可以使用onload
var canvas = document.createElement('canvas');
canvas.width = $('#svg_container svg').width();
canvas.height = $('#svg_container svg').height();
var context = canvas.getContext('2d'); //取得画布的2d绘图上下文
context.drawImage(bg_image, 0, 0);
var canvassvg = document.createElement('canvas');
canvassvg.width = $('#svg_container svg').width();
canvassvg.height = $('#svg_container svg').height();
canvassvg.id = 'canvassvg';
canvg(canvassvg,svgXml);
context.drawImage(canvassvg, 0, 0);
var suffix = image_url.substring(image_url.lastIndexOf(".")+1).toLowerCase();
var filename = image_url.substring(image_url.lastIndexOf("/")+1);
var image_type = "image/png";
if(suffix == 'jpg' || suffix == 'jpeg'){
image_type = "image/jpeg";
}else{
}
var dataURL = canvas.toDataURL(image_type);
var blobBin = atob(dataURL.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
array.push(blobBin.charCodeAt(i));
}
var file=new Blob([new Uint8Array(array)], {type: image_type});
var generatedFile = new File([file], filename, {type: image_type});
var params = {
'up' : generatedFile
}
fileUploadXhr({
url: '/xxx/xxxx'
, type: 'POST'
, cache: false
, dataType : 'json'
, resetForm : true
, clearForm : true
, includeHidden : false
, success : function() {
}
, error : function() {
}
}, params);