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