Question

我非常非常初学JS和HTML。我正在处理某个项目以生成饼图，我正在使用带有HTML API的googlecharts

我设法生成图表并获取图片网址。那当我打电话给这条线 window.open（URL）; 打开一个包含图片的新窗口。我的问题是，有一个类似的类型方法，它采取URL并下载项目文件夹中的图像？类似下载（URL，＆＃39; PNG＆＃39;）;甚至下载（URL）;？

Answer 1

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

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

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

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

编辑：对使用的代码进行了调整并实现了实现。

The fiddle。

我从谷歌图表文档“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

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

您可以致电downloadFile(URL);，用户可以选择保存图片的位置

Answer 3

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

否。

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

此javascript代码段将图像数据发送到远程PHP文件：

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

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

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

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

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.";
}

Answer 4

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

HTML5：

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

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

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

4 个答案: