Я придумала чистый способ JavaScript для принудительной загрузки изображения со следующими ограничениями:
- Использование HTML5, поэтому вообще не работает в браузерах IE до IE9.
- В IE (даже 9) ограничено очень маленькими изображениями из-за ограничения длины URL.
- Имя изображения (при сохранении на машине) не может быть определено в коде, в Chrome оно будет просто «загружаться» без расширения, а в Firefox это будет выглядеть как строковая строка с расширением «.part» - в любом случае пользователю придется переименовать файл, чтобы сделать его пригодным для использования.
- Можно загружать изображения только в одном домене - такая же политика происхождения.
Вышеуказанные ограничения (особенно третье) более или менее делают эту бесполезную, но все же, «основная» идея работает , и, надеюсь, когда-нибудь в будущем будет возможно определить имя файла это станет намного полезнее.
Вот код:
function DownloadImage(imageURL) {
var oImage = document.getElementById(imageURL);
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
if (typeof canvas.getContext == "undefined" || !canvas.getContext) {
alert("browser does not support this action, sorry");
return false;
}
try {
var context = canvas.getContext("2d");
var width = oImage.width;
var height = oImage.height;
canvas.width = width;
canvas.height = height;
canvas.style.width = width + "px";
canvas.style.height = height + "px";
context.drawImage(oImage, 0, 0, width, height);
var rawImageData = canvas.toDataURL("image/png;base64");
rawImageData = rawImageData.replace("image/png", "image/octet-stream");
document.location.href = rawImageData;
document.body.removeChild(canvas);
}
catch (err) {
document.body.removeChild(canvas);
alert("Sorry, can't download");
}
return true;
}
Как видите, хитрость заключается в рисовании изображения в объекте canvas, получении необработанных двоичных данных изображения и принудительной загрузке с использованием image/octet-stream типа MIME и изменении местоположения браузера.
Пример использования также следует.
HTML:
<image id="myimage" src="Penguins.jpg" />
<button type="btnDownload" rel="myimage">Download</button>
JavaScript:
window.onload = function() {
var arrButtons = document.getElementsByTagName("button");
for (var i = 0; i < arrButtons.length; i++) {
var oButton = arrButtons[i];
var sRelatedImage = oButton.getAttribute("rel");
if (sRelatedImage && sRelatedImage.length > 0) {
oButton.onclick = function() {
HandleRelatedImage(this, sRelatedImage);
}
}
}
};
function HandleRelatedImage(oButton, sRelatedImage) {
var oImage = document.getElementById(sRelatedImage);
if (!oImage) {
alert("related image '" + sRelatedImage + "' does not exist");
return false;
}
return DownloadImage(sRelatedImage);
}
Это позволяет «прикрепить» кнопку загрузки к каждому существующему изображению, назначив атрибут rel кнопки для идентификатора изображения - код сделает все остальное и прикрепит фактические события щелчка.
Из-за той же политики происхождения нельзя публиковать живой пример на jsFiddle - они используют домен «песочницы» для выполнения сценариев.