1.情景展示
閑來無事的時候，發現chrome擴展程序里面有圖像，本想下載下來，卻發現文件格式是svg格式，如何將svg文件改成圖片格式？
chrome-extension://jlgkpaicikihijadgifklkbpdajbkhjo/image/rating/1-stars.svg
2.解決方案
第一，JavaScript文件。
(function (global) {
global.svgToImg = function (svgHtml) {
this.svgHtml = svgHtml;
};
global.svgToImg.prototype = {
/**
* svg轉圖片
* @description
* 1.將svg轉base64；
* 2.將base64格式的svg轉指定的圖片格式並下載
* @param fileName
* 圖片名稱
* @param imgType
* 圖片類型：jpg/png/bmp
*
*/
change:function (fileName,imgType) {
var This = this;
//1.給svg標簽添加屬性：version和xmlns
[
['version', 1.1],
['xmlns', "http://www.w3.org/2000/svg"],
].forEach(function(item){
This.svgHtml.setAttribute(item[0], item[1]);
});
// 2.獲取到svg標簽+標簽內的所有元素
var str = This.svgHtml.parentNode.innerHTML;
//3.創建img
var img = document.createElement('img');
// 4.svg格式的base64圖像
img.setAttribute('src', 'data:image/svg+xml;base64,'+ btoa(unescape(encodeURIComponent(str))));
//base64格式的svg
//document.getElementById('baseSvg').src='data:image/svg+xml;base64,'+ btoa(unescape(encodeURIComponent(str)));
// 5.轉換成指定圖片格式
img.onload = function(){
// 1.創建canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
// 2.根據base64格式的svg生成canvas
context.drawImage(img, 0, 0);
// 3.將canvas轉字符串（按指定好的圖片格式）
var canvasData = canvas.toDataURL("image/" + imgType);
// 4.創建圖片元素
var img2 = document.createElement('img');
// 5.生成圖片
img2.setAttribute('src', canvasData);
// 6.下載該圖片
img2.onload = function () {
var a = document.createElement("a");
// 下載
a.download = fileName + "." + imgType;
a.href = img2.getAttribute('src');
a.click();
};
};
}
}
}(this));
第二，HTML頁面。
<body>
<div id="svgContainer">
<!-- 這里存放你的svg標簽 -->
<svg xmlns="http://www.w3.org/2000/svg" width="86" height="98" viewBox="0 0 86 98">
<g fill="none" fill-rule="evenodd">
<circle cx="42.8" cy="42.8" r="42.8" fill="#FED230"/>
<path stroke="#000" stroke-linecap="round" stroke-width="2.4" d="M33.6 35.4a6.6 6.6 0 0 0-13.2 0M64 35.4a6.6 6.6 0 0 0-13.2 0"/>
<circle cx="42.8" cy="66.8" r="8" fill="#000"/>
<rect width="11.6" height="67.6" x="21.2" y="30" fill="#1C85FF" fill-opacity=".694" rx="5.8"/>
<rect width="11.6" height="67.6" x="51.6" y="30" fill="#1C85FF" fill-opacity=".694" rx="5.8"/>
</g>
</svg>
</div>
<button onclick="change()">change</button>
<!-- base64svg -->
<img src="" id="baseSvg"/>
</body>
第三，引入JS代碼
<script src="svgToImg.js"></script>
<script>
var svgToImg;
window.onload = function() {
// 獲取到svg標簽
var svg = document.querySelector('svg');
// 實例化對象
svgToImg = new svgToImg(svg);
}
// 下載
function change() {
// svg轉圖片
svgToImg.change('Marydon','jpg');
}
</script>
3.效果展示
