从图像 URL javascript html 保存图像文件

Question

我是 JS 和 HTML 的初学者。 我正在开发一个生成饼图的项目，我正在使用带有 HTML API 的谷歌图表。

我设法生成了图表并获取了图像 URL。 当我调用此行时： window.open(URL); 打开一个包含图片的新窗口。 我的问题是，是否有类似的类型方法可以获取 URL 并下载项目文件夹中的图像？ 类似download(URL,'PNG'); 甚至download(URL);？

Answer 1

如果您尝试允许最终用户下载该图像，请查看此问题： Download image with JavaScript

如果您尝试下载图像以在页面中使用，为什么不使用标记并远程引用它？

    <img src="[url retrieved from the api]">

请记住，Javascript 在客户端运行，因此任何下载功能都将下载到最终用户，而不是项目文件夹。

编辑：修改了所使用的代码并进行了实现。

The fiddle。

我从 Google Chart 文档中提取了“Printing PNGs”。他们是这样做的：

//Your data and options initialization up here 
....

//Event listener
google.visualization.events.addListener(chart, 'ready', function () {
    chart_div.innerHTML = '<img src="' + chart.getImageURI() + '" download="chart.png">';
    console.log(chart_div.innerHTML);
}); 

//Actually draw the chart
chart.draw(data, options);

只需使用其他 SO 链接即可完成下载过程！

Answer 2

据我所知，在 Javascript 中无法做到这一点（我可能完全错了），所以您可以改为在 HTML5 中做到这一点。

HTML5：

<a href="website.com/imageurl.png" download="ImageNameHere">click here</a>

您可以在此处获取此标签支持的浏览器列表：http://caniuse.com/#feat=download

Answer 3

阅读这篇文章http://pixelscommander.com/en/javascript/javascript-file-download-ignore-content-type/（你可以在这里看到工作http://codepen.io/jelmerdemaat/pen/brjKG?editors=0010）

您可以拨打downloadFile(URL);用户可以选择保存图片的位置

Answer 4

“是否有类似的类型方法可以获取 URL 并下载项目文件夹中的图像？”问题的答案？是：

没有。

原因是任何包含 Javascript 的网页都不会在存储它的服务器上执行：而是将一个副本发送到用户浏览器，该浏览器在用户 PC 上运行它；此副本不知道服务器上的项目文件夹。在服务器上保存用户PC本地创建的图像的唯一方法是将图像上传到服务器，例如.PHP脚本等待数据；这样的 PHP 脚本在服务器上运行，因此它可以将接收到的图像存储在项目文件夹中。

这个 javascript sn-p 将图像数据发送到远程 PHP 文件：

$.post("http://www.example.com/image-saver.php",
{
  imgdata: imgData,
  pass: "mypass"
}

但是在调用脚本的那一刻，图像必须已经存在于页面中，这需要一点时间来加载，因此上面的脚本必须包含在一个只有在页面完成加载后才会激活的函数中：

window.onload = function() {
        $.post("http://www.example.com/image-saver.php",
        {
          imgdata: imgData,
          pass: "mypass"
        }
};

例如，“imgData”可以通过将包含在包含图像的画布中的数据转换为 URL 来创建：

imgData = canvas.toDataURL('image/png');

因此，“php”和“toDataURL”特定情况下的完整来源将是：

<script src="jquery.js"></script>
<script>
        window.onload = function() {
        imgData = canvas.toDataURL('image/png');
        $.post("http://www.example.com/image-saver.php",
        {
          imgdata: imgData,
          pass: "mypass"
        }
};
</script>

这些数据将被服务器上的 image-saver.php 脚本读取：

$data = $_POST['imgdata'];
$pass = $_POST['pass'];

if ($pass == "mypass") {
    $img = imagecreatefromstring(base64_decode(substr($data,strpos($data,',')+1)));
    $result = imagepng($img,"image.png");
    die($img);
    echo "Result: " . $result . "<br>";
} else {
    echo "Nice attempt.";
}