87,904
社区成员
发帖
与我相关
我的任务
分享highcharts 页面Svg转canvas再转png 效果怎么实现不了，代码在下面，求解答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Svg to Png</title>
<script src="jquery-1.8.3.min.js"></script>
<script src="canvas2image.js"></script>
<script src="base64.js"></script>
<script src="canvg.js"></script>
<script src="highcharts/highcharts.js"></script>
<script src="highcharts/modules/exporting.js"></script>
<script src="highcharts/highcharts-more.js"></script>
</head>
<body>
<script>
function saveCanvas(pCanvas, strType) {
var bRes = false;
if (strType == "PNG")
bRes = Canvas2Image.saveAsPNG(pCanvas);
if (strType == "BMP")
bRes = Canvas2Image.saveAsBMP(oCanvas);
if (strType == "JPEG")
bRes = Canvas2Image.saveAsJPEG(oCanvas);
if (!bRes) {
alert("Sorry, this browser is not capable of saving " + strType + " files!");
return false;
}
}
function aa()
{
var svgHtml = document.getElementById("container").innerHTML.Trim();
var canvasId=document.getElementById("canvasId");
canvg(canvasId,svgHtml);
}
function a2(){
var ccc = document.getElementById("canvasId");
var imgsrc=document.getElementById("myImg");
var a=convertCanvasToImage(ccc).src;
imgsrc.src=a;
}
function a3(){
var oCanvas = document.getElementById("canvasId");
saveCanvas(oCanvas, "PNG");
}
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
String.prototype.Trim = function () {
return this.replace(/(^\s*)|(\s*$)/g, "");
};
</script>
<script>
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on'
}]
});
});
</script>
<input type="button" value="转化为canvas" onClick="aa()" />
<input type="button" value="转化为img" onClick="a2()" />
<input type="button" value="下载img" onClick="a3()" />
<div id="container" >
</div>
<canvas id="canvasId"></canvas>
<img src='' id='myImg' style="width:100%; height:400px;" />
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Svg to Png</title>
<script src="jquery-1.8.3.min.js"></script>
<script src="canvas2image.js"></script>
<script src="base64.js"></script>
<script src="canvg.js"></script>
<script src="highcharts/highcharts.js"></script>
<script src="highcharts/modules/exporting.js"></script>
<script src="highcharts/highcharts-more.js"></script>
</head>
<body>
<script>
function saveCanvas(pCanvas, strType) {
var bRes = false;
if (strType == "PNG")
bRes = Canvas2Image.saveAsPNG(pCanvas);
if (strType == "BMP")
bRes = Canvas2Image.saveAsBMP(oCanvas);
if (strType == "JPEG")
bRes = Canvas2Image.saveAsJPEG(oCanvas);
if (!bRes) {
alert("Sorry, this browser is not capable of saving " + strType + " files!");
return false;
}
}
function aa()
{
var svgHtml = document.getElementById("container").innerHTML.Trim();
var canvasId=document.getElementById("canvasId");
canvg(canvasId,svgHtml);
}
function a2(){
var ccc = document.getElementById("canvasId");
var imgsrc=document.getElementById("myImg");
var a=convertCanvasToImage(ccc).src;
imgsrc.src=a;
}
function a3(){
var oCanvas = document.getElementById("canvasId");
saveCanvas(oCanvas, "PNG");
}
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
String.prototype.Trim = function () {
return this.replace(/(^\s*)|(\s*$)/g, "");
};
</script>
<script>
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on'
}]
});
});
</script>
<input type="button" value="转化为canvas" onClick="aa()" />
<input type="button" value="转化为img" onClick="a2()" />
<input type="button" value="下载img" onClick="a3()" />
<div id="container" >
</div>
<canvas id="canvasId"></canvas>
<img src='' id='myImg' style="width:100%; height:400px;" />
</body>
</html>
...全文
请发表友善的回复…
发表回复
qq_27370955 2015-11-13
- 打赏
- 举报
求完整代码，谢谢帅哥
CherryMu 2015-09-22
- 打赏
- 举报
不要沉啊，，，，
