Question

我已经和应用运行Framework7 使用Cordova构建，并且我使用 CanvasJS 来生成不同的图表。但是，在使用CanvasJS同时在Cordova下构建并启用导出选项以供用户将图表下载为PNG / JPG时，单击该按钮时没有任何反应，尽管浏览器中的一切正常并且图像下载得很好。 / p>

可能是什么问题？

谢谢！

我怀疑我可能需要手动提取CanvasJS图像
var canvas = $("#chartContainer .canvasjs-chart-canvas").get(0);
var dataURL = canvas.toDataURL('image/png');
并使用 cordova-plugin-file-transfer 之类的内容发送图像直接到用户手机，或者有更好的集成方式进入CanvasJS？

Answer 1

我前一段时间找到了解决方案，并决定回到我的问题并发布。希望它能帮助将来遇到同样问题的人。

所以我的解决方案如下：

// ... your Canvas logic ... use the code after chart.render(); //
// I've decided to remove the original Canvas drop-down button and replace it with a simple one
$(".canvasjs-chart-toolbar").html('<button class="button button-fill button-small" id="download_image">Download Image</button>');
// Hooking the newly replaced button with OnClick function
$('#download_image').click(function () {
    // Just adding a small alert showing the user the image is being downloaded
    dialog.alert('Please wait... <div class="preloader color-blue"></div>', "Downloading Image");
    // Collecting the image from the Canvas container
    var canvas = $("#chartContainer .canvasjs-chart-canvas").get(0);
    var dataURL = canvas.toDataURL('image/png');
    var f_name = "dwn_chart.png"; // You can use any name you want

    var downloadFile = function () {
        var download = function(fileEntry, uri, readBinaryData) {
            var fileTransfer = new FileTransfer();
            var fileURL = fileEntry.toURL();
            fileTransfer.download(
                uri, fileURL,
                function (entry) {
                    var onSaveImageSuccess = function() { dialog.close(); dialog.alert("File: " + f_name, "Download Success"); };                                    
                    var onSaveImageError = function(error) { dialog.close(); dialog.alert(error, "Download Error"); };
                    // Using Cordova ImageSaver to appropriately save the image to the user gallery
                    window.cordova.plugins.imagesaver.saveImageToGallery(entry.toURL(), onSaveImageSuccess, onSaveImageError);
                },
                function (error) {
                    dialog.close(); var error = String(error.source);
                    dialog.alert('<p style="color: #800000;">Download Error: <b>' + error + '</b></p>' +
                        '<p>Please refresh the Chart and try again, if the problem persists, contact support. Thank you.</p>');
                }, null, {}
            );
        };

        var onErrorLoadFs = function() { dialog.close(); dialog.alert("Error loading file.", "Download Error"); };
        var onErrorCreateFile = function() { dialog.close(); dialog.alert("Error creating file.", "Download Error"); };
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
            // Make sure you add the domain name to the Content-Security-Policy <meta> element.
            var url = rIP + "PPM/data/" + f_name; // Example: https://yourweb.com/path_to_file/file_name.png (f_name)
            // Parameters passed to getFile create a new file or return the file if it already exists.
            fs.root.getFile(f_name, { create: true, exclusive: false }, function (fileEntry) {
                download(fileEntry, url, true);
            }, onErrorCreateFile);
        }, onErrorLoadFs);
    };

    // Sending the image URI to my PHP file through AJAX located on the server so it can be saved
    $.ajax({
        cache: false,
        type: "POST",
        url: rIP + "PPM/save_chart.php", // Here you should use the address of your PHP file handling the save https://yourweb.com/your_save_php_file.php
        data: { 'URI': dataURL, 'Name': f_name }, // Sending the URI and the desired Name
        success: function () {
            downloadFile(); // When is done saving it the downloadFile() function is called
        }
    });
});

我的PHP保存文件：

<?php
    $Data = $_POST['URI'];
    $Name = $_POST['Name'];

    function SaveChartIMG($Data, $Name) {
        $imgData = str_replace(' ','+', $Data);
        $imgData =  substr($imgData,strpos($imgData,",")+1);
        $imgData = base64_decode($imgData);
        // Path where the image is going to be saved
        $filePath = $_SERVER['DOCUMENT_ROOT']. '/PPM/data/'.$Name;
        // Write $imgData into the image file
        $file = fopen($filePath, 'w');
        fwrite($file, $imgData);
        fclose($file);
    }

    SaveChartIMG($Data, $Name);
?>

我知道我的代码可能不是最有效的方式，因此请随意编辑并根据需要进行调整。我希望它会帮助别人。

Cordova插件使用：

<plugin name="cordova-plugin-file" spec="4.3.3"/>
<plugin name="cordova-plugin-file-transfer" spec="1.6.3"/>
<plugin name="cordova-plugin-save-image"/>

Cordova Framework7使用CanvasJS导出Image

1 个答案: