直接从HTML5画布保存图片 [英] Saving images from HTML5 canvas directly
问题描述
我浏览了highcharts网站上提供的演示jsfiddle,网址为: http://jsfiddle.net/highcharts/PDnmQ / 。
当我点击按钮作为保存为png,它下载一个标题为下载,而不是一个png文件。
I went through the demo jsfiddle provided on the highcharts website at http://jsfiddle.net/highcharts/PDnmQ/. When i click the button as save as png, it downloads a file titled as download and not a png file.
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
脚本:
(function (H) {
H.Chart.prototype.createCanvas = function (divId) {
var svg = this.getSVG(),
width = parseInt(svg.match(/width="([0-9]+)"/)[1]),
height = parseInt(svg.match(/height="([0-9]+)"/)[1]),
canvas = document.createElement('canvas');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
if (canvas.getContext && canvas.getContext('2d')) {
canvg(canvas, svg);
var image = canvas.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
// Save locally
window.location.href = image;
} else {
alert ("Your browser doesn't support this feature, please use a modern browser");
}
}
}(Highcharts));
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
title: {
text: 'Click the button and Save as PNG =>',
align: 'right',
x: -40
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
exporting: {
buttons: {
contextButton: {
menuItems: [{
text: 'Print',
onclick: function() {
this.print();
}
}, {
text: 'Save as PNG',
onclick: function() {
this.createCanvas();
},
separator: false
}]
}
}
}
});
推荐答案
例如,假设此锚点存在于您的HTML中:
For example, lets say this anchor exists in your HTML:
<a id="saveAs" href="#">Click to download</a>
然后,当您从画布上抓取图片时,通过这种方式更新锚标签:
When you then grab the image from canvas you update the anchor tag this way:
var link = document.getElementById('saveAs');
link.href = canvas.toDataURL(); /// set data-uri as href, defaults to PNG
link.download = 'myFilename.png'; /// set filename
现在您可以单击锚链接,它将允许您下载文件
Now you can click the anchor link and it will allow you to download the file with the set filename.
您还可以动态创建一个离屏定位标记,并通过模拟点击事件来调用点击。
You can also create an off-screen anchor tag dynamically and invoke a click by simulating an click event.
这篇关于直接从HTML5画布保存图片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!