Javascript 单击按钮保存客户端生成的图像
我有一个要保存到磁盘的映像。您不能右键单击图表并保存图像,因为它使用了多个画布。然而,图表确实有一个方法,该方法将获取整个图表图像并将其返回到javascript变量中 我想通过点击按钮自动将此文件保存到用户的下载文件夹。如果这是一个服务器端映像,我可以简单地将用户指向适当的url,但事实并非如此 用户如何通过单击按钮下载客户端生成的图表png图像?我需要一个交叉浏览器解决方案Javascript 单击按钮保存客户端生成的图像,javascript,jquery,infragistics,ignite-ui,Javascript,Jquery,Infragistics,Ignite Ui,我有一个要保存到磁盘的映像。您不能右键单击图表并保存图像,因为它使用了多个画布。然而,图表确实有一个方法,该方法将获取整个图表图像并将其返回到javascript变量中 我想通过点击按钮自动将此文件保存到用户的下载文件夹。如果这是一个服务器端映像,我可以简单地将用户指向适当的url,但事实并非如此 用户如何通过单击按钮下载客户端生成的图表png图像?我需要一个交叉浏览器解决方案 您可以按以下方式进行操作: 等待动画结束 复制最后一个画布中的所有画布 将数据分配到url(不是按钮) setTim
您可以按以下方式进行操作:
setTimeout(函数(){
var c=$(“#图表画布”);//获取所有画布的句柄
var ctx=c[c.length-1].getContext('2d');
对于(i=0;i
此解决方案提供了更好的解决方案,可以分配给按钮
igDataChart
Util.dataURLToBlob
from转换为blobsaveAs
from将blob保存到文件中
你必须支持IE@BillPull吗?不,我不必支持IE等待动画结束的好观点。有没有一种方法可以将其与exportImage方法结合使用?这种方法非常有效,但在IE中不起作用,也不需要单击按钮。下载属性是相当新的,在IE中还不受支持:是的,就像我说的,它只适用于URL,IE在HTML5功能方面有很多限制。。。这可能是你需要的,好的。谢谢你到目前为止的帮助,我来看看。这个效果很好。你可以更新你的第一个答案,而不是提交一个新的答案。我会做一些测试,以确保它在所有情况下都有效,然后将其标记为answerFilesaver.js具有良好的浏览器支持。Util.dataURLToBlob仅在Chrome上受支持,但它似乎也适用于IE,因此在IE中完全支持HTML 5之前,这似乎与我将获得的跨浏览器解决方案一样好。感谢您提供的良好信息和努力。
$(function () {
$("#exportBtn").click(function(){
//returns an image DOM element;
var pngImage = $("#chart").igDataChart("exportImage");
//now i need to download the image
});
});
setTimeout(function () {
var c = $("#chart canvas"); //get handle to all canvas
var ctx = c[c.length - 1].getContext('2d');
for (i = 0; i < c.length - 1; i++) { //add all canvas to the last one
ctx.drawImage(c[i], 0, 0);
}
for (i = 0; i < c.length - 1; i++) { //remove the duplicates
c[i].remove();
}
//add data to url
function downloadCanvas(link, canv, filename) {
link.href = canv.toDataURL();
link.download = filename;
}
$("#dl1").click(function () {
downloadCanvas(this, c[2], 'test.png');
});
}, 1000); //wait till animation end
//check support
try {
var isFileSaverSupported = !! new Blob;
} catch (e) {}
setTimeout(function () {
//add data to url
function downloadCanvas(link, canv, filename) {
if (isFileSaverSupported) {
saveAs(Util.dataURLToBlob(canv.src), filename);
}
}
$("#exportBtn").click(function () {
downloadCanvas(this, $("#chart").igDataChart("exportImage", 800, 600), 'test.png');
});
}, 1000); //wait till animation end