Загрузить локальное изображение в браузер, используя JavaScript? - PullRequest
21 голосов
/ 22 октября 2010

В настоящее время я разрабатываю решение для приложения для печати плакатов.

Одна из функций, которую я хотел бы включить, - это возможность «редактировать» (обрезать / масштабировать / повернуть)) данного изображения, прежде чем приступить к заказу плаката с указанным изображением.

Чтобы избежать требования пользователя загружать изображение на удаленный сервер перед редактированием, я хотел бы знать следующее:

Возможно ли (с использованием JavaScript) загрузить изображение, хранящееся на клиентском компьютере, в браузер / память браузера для редактирования, не загружая изображение на удаленный сервер?И если да, то как это сделать?

Спасибо,

БК

Ответы [ 4 ]

11 голосов
/ 15 июля 2012

Изображение может быть отредактировано без необходимости пользователя загружать изображение на сервер.

Взгляните на ссылку ниже.Это можно сделать довольно легко.

Чтение локальных файлов с использованием Javascript

2 голосов
/ 28 марта 2014

Да, вы можете!Но для этого браузер должен поддерживать локальное хранилище!Это HTML5 API, поэтому большинство современных браузеров смогут это сделать!Помните, что localalstorage может сохранять только строковые данные, поэтому вы должны изменить изображения в строку BLOB-объектов.Ваш источник изображения будет выглядеть примерно так

Это короткий фрагмент, который поможет вам!

                if(typeof(Storage)!=="undefined"){

                // here you can use the localstorage
                // is statement checks if the image is in localstorage as a blob string
                if(localStorage.getItem("wall_blue") !== null){

                var globalHolder = document.getElementById('globalHolder');
                var wall = localStorage.getItem('wall_blue');
                globalHolder.style.backgroundImage= "url("+wall+")";


                 }else{

                // if the image is not saved as blob in local storage
                // save it for the future by the use of canvas api and toDataUrl method
                var img = new Image();
                img.src = 'images/walls/wall_blue.png';
                img.onload = function () {

                var canvas = document.createElement("canvas");
                canvas.width =this.width;
                canvas.height =this.height;

                var ctx = canvas.getContext("2d");
                ctx.drawImage(this, 0, 0);
                var dataURL = canvas.toDataURL();
                localStorage.setItem('wall_blue', dataURL);

                };

            }}else{//here  you upload the image without local storage }

Надеюсь, вы найдете этот короткий фрагмент полезным.Помните, Localstorage сохраняет только строковые данные, поэтому вы не можете

Да, и, кстати, если вы используете jcrop для обрезки изображений, вы должны сохранить код BLOB-объекта из изображения в форму и отправить его на сервер вручную, посколькуjcrop обрабатывает изображения только как файл, а не как строку base64.

Удачи!: D

0 голосов
/ 07 июня 2012

Я просто пытаюсь сделать это, но с хромом я получаю это сообщение:

Not allowed to load local resource: file:///C:/fakepath/1.jpg

, когда я делаю это:

$img = new Image();
$img.src = $('#f').val();
$img.onLoad = function (){
    alert('ok');
}
0 голосов
/ 22 октября 2010

Используя Html / Javascript, вы можете выбирать файлы только с помощью html-компонента загрузки файлов (я думаю, что Flash / Silverlight оберните это, чтобы упростить задачу, но он все еще находится в песочнице)

Однако вы можете использовать апплеты Java (или как угодноназываются в наши дни), нативные элементы управления ActiveX или .Net Controls для предоставления дополнительных функций (это имеет последствия для безопасности и требует VM / Runtime Frameworks и т. д.)

Adobe Air или другая технология на стороне клиента может работать, но похоже, что выхочу сделать это в JavaScript.В этом случае наилучшим выбором будет выгрузка файла на сервер и манипулирование оттуда.

* [РЕДАКТИРОВАТЬ] С 2010 года, с тех пор как на этот вопрос был дан ответ, технология перешла на html и теперь имеетспособность создавать и манипулировать в браузере.см. новые ответы или эти примеры: http://davidwalsh.name/resize-image-canvas http://deepliquid.com/content/Jcrop.html *

...