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);