js svg轉圖片格式
1.情景展示
閑來無事的時候，發現chrome擴展程序里面有圖像，本想下載下來，卻發現文件格式是svg格式，如何將svg文件改成圖片格式？
chrome-extension://jlgkpaicikihijadgifklkbpdajbkhjo/image/rating/1-stars.svg
2.解決方案
第一，JavaScript文件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
(
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頁面。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<
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代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<
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.效果展示
