VPF::Загрузка картинки - Форум программистов

Terikon

Дата 19.5.2013, 22:49 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 58
Регистрация: 1.4.2009

Репутация: нет
Всего: нет

Есть такой код
<html><body><img src="http://site.ru/image.jpg"></body></html>

Подскажите как сохранить картинку на диск с помощью яваскрипта

сохранить нужно именно сохранённую скриптом картинку т.к. при новом запросе картинка меняется.

Это сообщение отредактировал(а) Terikon - 19.5.2013, 23:06

Sanchezzz

Дата 20.5.2013, 14:29 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60

Готовы к извращению?

Вот одно из рабочих решений немного модифицировал оригинал для получения base:64 картинки через canvas

Код


<img id="preview" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG">
 <canvas id="myCanvas"/>

Код


var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("preview");
ctx.drawImage(img, 10, 10); 
var data = c.toDataURL();   
    var img = document.images[0];
    img.onclick = function() {
        // atob to base64_decode the data-URI
        var image_data = atob(data.split(',')[1]);
        // Use typed arrays to convert the binary data to a Blob
        var arraybuffer = new ArrayBuffer(image_data.length);
        var view = new Uint8Array(arraybuffer);
        for (var i=0; i<image_data.length; i++) {
            view[i] = image_data.charCodeAt(i) & 0xff;
        }
        try {
            // This is the recommended method:
            var blob = new Blob([arraybuffer], {type: 'application/octet-stream'});
        } catch (e) {
            // The BlobBuilder API has been deprecated in favour of Blob, but older
            // browsers don't know about the Blob constructor
            // IE10 also supports BlobBuilder, but since the `Blob` constructor
            //  also works, there's no need to add `MSBlobBuilder`.
            var bb = new (window.WebKitBlobBuilder || window.MozBlobBuilder);
            bb.append(arraybuffer);
            var blob = bb.getBlob('application/octet-stream'); // <-- Here's the Blob!
        }

        // Use the URL object to create a temporary URL
        var url = (window.webkitURL || window.URL).createObjectURL(blob);
        location.href = url; // <-- Download!
    };

Оригинал тут, там еще есть более гуманное решение на HTML5 в последнем ответе.

--------------------

Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.

Terikon

Дата 20.5.2013, 15:41 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 58
Регистрация: 1.4.2009

Репутация: нет
Всего: нет

Sanchezzz, Спасибо большое,буду пробовать, я люблю извращения))))

Sanchezzz

Дата 20.5.2013, 15:53 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60

UPD 1
Решение требует напильник.

Я сейчас исправляю 2 бага, уже наткнулся, если кто найдет раньше меня оставьте пост smile

1 Это размер картинки превышает оригинал... может то что, через canvas экспорт идет.
2 Это имя файла собственноt задать за место GRUD генерации

В общем то что у меня, я c делаю jQuery 1.9 'love jq

Код


forseDownloadImage = function (url, filename) {
    filename || 'file.jpg';
    var el = $('<img>', {'src' : url}),
        canvas = $('<canvas/>', {class : 'hub'}),
        context = canvas.get(0).getContext("2d");
        
    context.drawImage(el.get(0), 1, 1);    
    el.on('load', function () {
        
        var image_data = atob(canvas.get(0).toDataURL().split(',')[1]),
            arraybuffer = new ArrayBuffer(image_data.length),
            view = new Uint8Array(arraybuffer);        
        for (var i = 0; i < image_data.length; i++) { view[i] = image_data.charCodeAt(i) & 0xff;};
        try {
            var blob = new Blob([arraybuffer], {type : 'application/octet-stream'});
        } catch (e) {
            // The BlobBuilder API has been deprecated in favour of Blob, but older
            // browsers don't know about the Blob constructor
            // IE10 also supports BlobBuilder, but since the `Blob` constructor
            //  also works, there's no need to add `MSBlobBuilder`.
            var bb = new(window.WebKitBlobBuilder || window.MozBlobBuilder);
            bb.append(arraybuffer);
            var blob = bb.getBlob('application/octet-stream'); // <-- Here's the Blob!
        }
        
        var url = (window.webkitURL || window.URL).createObjectURL(blob),
        a = $('<a/>', {    'href' : url,    'download' : filename });
        a.get(0).click();
    });
};

// usage 
forseDownloadImage('http://cmv/assets/backend/media/grid.png','1.png')

Это сообщение отредактировал(а) Sanchezzz - 20.5.2013, 16:52

--------------------

Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.

akizelokro

Дата 21.5.2013, 21:28 (ссылка)

(нет голосов)

Загрузка ...

Крокодил

Профиль
Группа: Участник
Сообщений: 761
Регистрация: 30.7.2007

Репутация: 2
Всего: 5

Размеры канвы нужно подравнивать.

Код


var image1 = document.getElementById("myimage");
var canvas = document.getElementById("mycanvas");
canvas.width = image1.width;
canvas.height = image1.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image1, 0, 0);
var dataURL = canvas.toDataURL("image/jpeg");

и если кто желает, ещё можно дописать строчку, чтобы выгрызть из dataURL начальное "jpeg(jpg,png);base64".

--------------------

a = a + b; b = a - b; a = a - b;

Sanchezzz

Дата 21.5.2013, 23:32 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60

Что то редактирование поста с форума на новом не обновляет...
Размер у канвы не решает проблему может, это только у png или косяк ArrayBuffer.
Факт в том что, через сылку лучше отдать, меньше кода + имя файла. Последний пост в привиденной сылке выше.

Этот ответ добавлен с нового Винграда - http://vingrad.com

akizelokro

Дата 22.5.2013, 01:48 (ссылка)

(нет голосов)

Загрузка ...

Крокодил

Профиль
Группа: Участник
Сообщений: 761
Регистрация: 30.7.2007

Репутация: 2
Всего: 5

ну, может быт, во-первых не ..,1 , 1, а , 0, 0.

Код


context.drawImage( el.get(0), 1, 1);

Этот ответ добавлен с нового Винграда - http://vingrad.com

akizelokro

Дата 22.5.2013, 01:54 (ссылка)

(нет голосов)

Загрузка ...

Крокодил

Профиль
Группа: Участник
Сообщений: 761
Регистрация: 30.7.2007

Репутация: 2
Всего: 5

и потом надо сравнить реальные (первоначальные) размеры картинки с теми, которые у <img>
копирование через канву идёт для изображения, а не для самого файла.
а drawImage хитрая функция, которая, например, и масштабировать и обрезать изображение умеет

Этот ответ добавлен с нового Винграда - http://vingrad.com

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »