Имитация загрузки файла
 

У меня есть плагин кропа изображения. При выборе изображения через кнопку "обзор" плагин подгружает выбранное фото для кропа вот так http://prntscr.com/8y3f7z , а я хочу чтобы по нажатию кнопки сброс, в плагин автоматом подгружалось фото с сервака. Как такое сделать? я так понимаю мне надо симитировать загрузку в поле file через js?

у меня стоит вот этот плагин https://github.com/bupy7/yii2-widget-cropbox

я нашёл строки кода

selectFromFile = function() {
var fileReader = new FileReader();
fileReader.readAsDataURL(this.files[0]);
$(fileReader).one(EVENT_LOAD, loadImage);
},

как я понимаю мне надо как-то вместо this.files[0] поставить объект своего файла

Зачем? Имитировать загрузку в поле file нельзя, а передать в плагин удаленный сетевой файл можно, и это делать нужно в jq-плагине, по ссылке же, это серверный обработчик.

Это уже клиентский код. Теперь ищите обработчик события кнопки Сбросить, и он должен обращаться к функции selectFromFile передавая в нее загруженное по сети изображение (var im = new Image(); im.src = "сетевой путь" и т.д.) в общем немного дорабатывать код надо.

а не подскажете как получить объект файла по ссылке?

Код не сложный:

var im = new Image();
im.onload = function() {
    //здесь в selectFromFile передать this - это и будет тело изображения,
    //которое уже и должно быть передано readAsDataURL(this);
    //а можно проще, если в плагине используется canvas, то передать сразу в canvas  
}
im.src = "путь сетевого файла"

Но серверная сторона плагина обрабатывает файл загруженный методом POST, то есть считать на клиенте сетевой файл, это еще не решение вопроса, его нужно либо опять передать на сервер, что в общем то лишено смысла, либо сообщить серверу только координаты обрезки и то, что нужно работать с локальным (серверным) файлом.

у меня не получается передать загружаемое по сети изображение(

делаю вот так
var fileReader = new FileReader();
var im = new Image();
im.src = 'http://look.loc/statics/web/blogs/preview/9602/9602.jpg';
fileReader.readAsDataURL(im);
$(fileReader).one(EVENT_LOAD, loadImage);

и ничего

а не могли бы вы глянуть код, я готов заплатить( просто не получается самому сделать

Так нельзя, смотрите выше. Но и просто вставить в код эти строки тоже нельзя, это ведь надо делать по событию кнопки Сбросить.

я по событию это делаю

смотрите как сделал

$('.original-image').on('click', testF);

testF = function() {
            var fileReader = new FileReader();
            var im = new Image();
            im.onload = function() {
                selectFromFile(this);
            }
            im.src =       'http://look.loc/statics/web/blogs/preview/9602/9602.jpg';
        },

и мне выкидывает ошибку Uncaught TypeError: Cannot read property 'files' of undefined

Нужно код переработать немножко, просто так вставить строки не получиться. )

Не надо дважды FileReader, нужно лишь описать отдельной функций получение содержимого изображения как для формы так и для кнопки, понятно о чем я говорю?

ой fileReader нечаянно вставил у меня один он. ну я частично понимаю о чем вы только вот до конца не могу понять. Вот в im у меня объект изображения и я так понимаю в функции selectFromFile нужно сделать чтобы он загружался. я правильно понял или нет?

я просто с js не на таком уровне дружу чтобы нормально это всё сделать(

так а для кнопки как будет правильно получение? логику то я разделю для того и для того, меня больше волнует как сделать для кнопки

Функция selectFromFile должна принимать аргумент, например

selectFromFile = function(f)

который задает источник изображения - или files[0], или полученное по сети изображение, то есть передается в нее

selectFromFile(this.files[0]) - в обработчике onchange поля file

или

selectFromFile(this) - загруженное по сети в событии onload

а в функци работать с аргументом

fileReader.readAsDataURL(f);


В общем код надо править так или иначе. Ну и серверную часть тоже.

Ну если затруднительно, то смотрите далее - где полученное изображение передается непосредственно в обрезку, да еще если и аргументом, то есть будет более понятно.

смотрите можно же и так сделать, т.е если криво для начала

$('.original-image').on('click', resetImage);
resetImage = function() {
            var im = new Image();
            im.src = 'http://look.loc/statics/web/blogs/preview/9602/9602.jpg';
            im.onload = function() {
                var fileReader = new FileReader();
                fileReader.readAsDataURL(this);
                $(fileReader).one(EVENT_LOAD, loadImage);
            }
        },

т.е просто чуть продублировать кода. но тогда выскакивает ошибка
Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

Запутал беднягу ). Это удалить в случае чтения сетевого файла

fileReader.readAsDataURL(this);

хотя можно и Blob получить, но нет смысла.

Это в функции selectFromFile

fileReader.readAsDataURL(f)

будет получать FileReader, а сетевое изображение (аргумент f), должно передаваться дальше на обработку. Для него не нужно var fileReader = new FileReader(); и fileReader.readAsDataURL(this);

Ищите далее по коду - передача этого в саму обрезку.

Ориентир - изображение полученное из поля file как fileReader.readAsDataURL() будет присваиваться src изображения, которое в блоке обрезки находится (ищите в результирующем html-коде), а в случае сетевого изображения, этому scr нужно передать this в событии im.ounload. Если используется canvas, то где-то "недалеко" будет и передача в него.

так что сказать я понял что загрузка дальше, короче пробовал сделать дальше, сделал вообще вот так

resetImage = function() {
            var im = new Image();
            im.src = 'http://look.loc/statics/web/blogs/preview/9602/9602.jpg';
            im.onload = function(event) {
                $(this).one(EVENT_LOAD, loadImage);
            }
        },

а сама функция лоад вот

loadImage = function(event) {
            $(sourceImage).one(EVENT_LOAD, function() {
                $image.one(EVENT_LOAD, start);
                $image.attr('src', this.src);
            });
            sourceImage.src = event.target.result;
        },

и в итоге я стал получать окно http://prntscr.com/8y6i0n вот только ничего не сохраняет, как будто из пустого хочет сделать что-то

а как мне Blob получить правильно? я думаю у меня косяк идёт именно поэтому, по сути если Blob получить должно быть всё нормально

эх уже почти всё но не сохраняет((((
сделал конечный результат вот так

resetImage = function() {
            var im = new Image();
            im.src = 'http://look.loc/statics/web/blogs/preview/9602/9602.jpg';
            im.onload = function(event) {
                $image.one(EVENT_LOAD, start);
                $image.attr('src', this.src);
                sourceImage.src = this.src;
            }
        },

всё работает как надо кропает визуально, но только ничего не сохраняет на серваке((

Ну я ведь писал ранее - серверный скрипт ориентирован на обработку файла загружаемого формой. Вставить в поле file файл полученный по сети нельзя, а значит и не будет ни какой отправки файла, а значит и сохранения.

Дорабатывать надо серверный скрипт так, чтобы при получении координат, но не загруженного файла, сервер брал локальный файл, который определен для плагина сетевым. Либо с клиента передавать считанный сетевой (нужно дорабатывать клиентский код загрузки файлов на сервер), что в общем то глупо.

ага спасибо за всё, очень сильно помогли, серверную часть я уже точно сам сделаю

Значит получается, что не используется ни canvas, ни FormData() и изображение передается не Ajax методом на сервер. В таком случае не надо var im = new Image() и т.д., а просто указать путь сетевого файла изображению, которое в блоке обрезки.