从图像 URL javascript html 保存图像文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36732271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Save Image file from Image URL javascript html
提问by Michel Mina
I'm a beginner with JS and HTML. I'm working on a certain project to generate pie charts, I am using google charts with an HTML API.
我是 JS 和 HTML 的初学者。我正在某个项目上生成饼图，我正在使用带有 HTML API 的谷歌图表。
I managed to produce the chart and get the image URL.
That when I call this line:
window.open(URL);a new window is opened containing the picture.
My question is, is there a similar type method that takes the URL and downloads the image in the project folder?
something like download(URL,'PNG');or even download(URL);?
我设法生成图表并获取图像 URL。当我调用此行时：
window.open(URL);打开一个包含图片的新窗口。我的问题是，是否有类似类型的方法可以获取 URL 并在项目文件夹中下载图像？类似download(URL,'PNG');或什至download(URL);？
回答by Hyman Michaud
See this question if you're trying to allow the end user to download that image: Download image with JavaScript
如果您尝试允许最终用户下载该图像，请参阅此问题： 使用 JavaScript 下载图像
If you're trying to download the image for use in the page, why not use an tag and reference it remotely?
如果您尝试下载图像以在页面中使用，为什么不使用标签并远程引用它呢？
<img src="[url retrieved from the api]">
Keep in mind that Javascript is run on the client side, so any download functions would download to the end user, not the project folder.
请记住，Javascript 在客户端运行，因此任何下载功能都会下载到最终用户，而不是项目文件夹。
EDIT: Made a fiddle with the code used and made an implementation.
编辑：对使用的代码进行了修改并进行了实现。
小提琴。
I pulled from the Google Chart docs "Printing PNGs". Here's how they did it:
我从 Google Chart 文档中提取了“打印 PNG”。以下是他们的做法：
//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);
Just use the other SO link to complete the download procedure!
只需使用其他 SO 链接即可完成下载过程！
回答by MEGALELZ
As far as I'm aware there is no way of doing this in Javascript (I could be totally wrong) so you could do it in HTML5 instead.
据我所知，在 Javascript 中没有办法做到这一点（我可能完全错了），所以你可以在 HTML5 中做到这一点。
HTML5:
HTML5：
<a href="website.com/imageurl.png" download="ImageNameHere">click here</a>
<a href="website.com/imageurl.png" download="ImageNameHere">click here</a>
You can get a list of supported browsers for this tag here: http://caniuse.com/#feat=download
您可以在此处获取此标签支持的浏览器列表：http: //caniuse.com/#feat=download
回答by Duke
Read this article http://pixelscommander.com/en/javascript/javascript-file-download-ignore-content-type/(you can see working here http://codepen.io/jelmerdemaat/pen/brjKG?editors=0010)
阅读这篇文章http://pixelscommander.com/en/javascript/javascript-file-download-ignore-content-type/（你可以在这里看到工作http://codepen.io/jelmerdemaat/pen/brjKG?editors=0010)
You can call downloadFile(URL);the user can choose where him will save the image
您可以调用downloadFile(URL);用户可以选择他将保存图像的位置
回答by jumpHyman
The answer to question "is there a similar type method that takes the URL and downloads the image in the project folder?" is:
问题的答案“是否有类似的类型方法，可以获取 URL 并下载项目文件夹中的图像？” 是：
No.
不。
The reason is that any web page containing Javascript is not executed on the server where it is stored: instead, a copy is sent to the user browser, which runs it on user PC; this copy is not aware of the project folder on the server. The only way to save on the server an image created locally on user PC is to upload the image to the server, where for example a .PHP script waits for the data; such PHP script runs on the server, hence it can store in the project folder the received image.
原因是任何包含 Javascript 的网页都不会在存储它的服务器上执行：而是将副本发送到用户浏览器，后者在用户 PC 上运行它；此副本不知道服务器上的项目文件夹。在服务器上保存用户 PC 本地创建的图像的唯一方法是将图像上传到服务器，例如一个 .PHP 脚本等待数据；这样的 PHP 脚本在服务器上运行，因此它可以将接收到的图像存储在项目文件夹中。
This javascript snippet sends image data to remote PHP file:
此 javascript 代码段将图像数据发送到远程 PHP 文件：
$.post("http://www.example.com/image-saver.php",
{
imgdata: imgData,
pass: "mypass"
}
But at the moment the script is called, the image must be already present in the page, which takes a little to be loaded, hence above script must be enclosed inside a function which is activated only after page has completed loading:
但是在调用脚本的那一刻，图像必须已经存在于页面中，这需要一点时间来加载，因此上面的脚本必须包含在一个函数中，该函数只有在页面加载完成后才被激活：
window.onload = function() {
$.post("http://www.example.com/image-saver.php",
{
imgdata: imgData,
pass: "mypass"
}
};
The "imgData" can be for example created by converting to URL the data contained in the canvas which holds the image:
例如，可以通过将保存图像的画布中包含的数据转换为 URL 来创建“imgData”：
imgData = canvas.toDataURL('image/png');
Hence the full source in the specific case of "php" and "toDataURL" would be:
因此，“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>
These data will be read by image-saver.php script on the server:
这些数据将由服务器上的 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.";
}
