Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Загрузка картинки

Автор: Terikon 19.5.2013, 22:49

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

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

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

Автор: Sanchezzz 20.5.2013, 14:29

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

Вот одно из рабочих решений немного модифицировал оригинал для получения 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!
    };

http://stackoverflow.com/questions/10473932/browser-html-force-download-of-image-from-src-dataimage-jpegbase64?rq=1

Автор: Terikon 20.5.2013, 15:41

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

Автор: Sanchezzz 20.5.2013, 15:53

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')

Автор: akizelokro 21.5.2013, 21:28

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

Код


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

Автор: Sanchezzz 21.5.2013, 23:32

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

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

Автор: akizelokro 22.5.2013, 01:48

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

Код


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

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

Автор: akizelokro 22.5.2013, 01:54

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

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