如何在提交时下载CanvasJS的照片 [英] How to Download a Photo of CanvasJS on Submit

问题描述

我正在使用Canvas JS在表单内部创建图形图像.当前，可以通过单击3的虚线按钮(如下图所示)然后单击另存为PNG"来创建图形的图像.

I am using Canvas JS to create a graph image inside of my form. Currently, an image can be created of the graph by clicking the 3 dotted button (shown in the image below), and then hitting "Save as PNG".

当某人提交表单时，我希望创建图形的图像，然后将其发送给填写该表单的人.

When someone submits the form, I want an image of the graph to be created, which will then get sent to the person filling the form out.

但是，我不知道该怎么做.这是我使用JQuery尝试过的方法:

However, I cannot figure out how to do this. Here is what I have tried using JQuery:

$(document).ready(function() {
    $('.submit-button').click(function(e) {  
        $("button[title='More Options']").first().click();
        $("div").text('Save as PNG').click();
    });
});

(当我单击提交"时，它不会下载任何内容.我的JQuery也已设置，[我已经用警报测试了该功能].)

(When I click submit, it doesn't download anything. My JQuery is set up, as well [I have tested the function with alerts].)

可以在此处查看该图的示例:

An example of the graph can be seen here:

推荐答案

未正确选择所需的div.您可以使用:

The required div is not selected properly. You can use:

$( document ).ready(function (){
  $('.submit-button').click(function () {
    $('.canvasjs-chart-toolbar > div > div')[0].click(); // 0 for JPEG, 1 for PNG
  });
});

请参考小提琴.

或者，您可以使用 toDataURL 进行导出CanvasJS图表作为图像.请参阅此小提琴.

Alternatively, you can use toDataURL to export CanvasJS Chart as image. Please refer to this fiddle.

这篇关于如何在提交时下载CanvasJS的照片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！