Cordova Framework7使用CanvasJS导出图片
Cordova Framework7 using CanvasJS to export Image
我有应用 运行 Framework7 build with Cordova 我正在使用 CanvasJS 生成不同的图表。但是,在使用 CanvasJS 而在 Cordova 下构建并启用导出选项以便用户将图表下载为 PNG/JPG 时,单击按钮时没有任何反应,尽管通过浏览器一切正常并且图像下载正常.
可能是什么问题?
谢谢!
I suspect I may need to extract the CanvasJS image manually
var canvas = $("#chartContainer .canvasjs-chart-canvas").get(0);
var dataURL = canvas.toDataURL('image/png');
and use something like cordova-plugin-file-transfer to send that
image dirrectly to the user phone, or there is a better way integrated
into CanvasJS ?
我刚才找到了一个解决方案,并决定回到我的问题 post。希望它能帮助将来遇到同样问题的人。
所以我的解决方案如下:
// ... 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"/>
我有应用 运行 Framework7 build with Cordova 我正在使用 CanvasJS 生成不同的图表。但是,在使用 CanvasJS 而在 Cordova 下构建并启用导出选项以便用户将图表下载为 PNG/JPG 时,单击按钮时没有任何反应,尽管通过浏览器一切正常并且图像下载正常.
可能是什么问题?
谢谢!
I suspect I may need to extract the CanvasJS image manually
var canvas = $("#chartContainer .canvasjs-chart-canvas").get(0); var dataURL = canvas.toDataURL('image/png');
and use something like cordova-plugin-file-transfer to send that image dirrectly to the user phone, or there is a better way integrated into CanvasJS ?
我刚才找到了一个解决方案,并决定回到我的问题 post。希望它能帮助将来遇到同样问题的人。
所以我的解决方案如下:
// ... 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"/>