Загрузить локальное изображение в браузер, используя JavaScript?

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

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

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

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

Спасибо,

BK

Источник

4 ответа

Решение

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

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

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

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

Источник

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

Посмотрите на ссылку ниже. Это можно сделать довольно легко.

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

Источник

Да, ты можешь! Но для этого браузер должен поддерживать локальное хранилище! Это 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 для обрезки изображений, вы должны сохранить код большого двоичного объекта из изображения в форму и отправить его на сервер вручную, потому что jcrop обрабатывает изображения только как файл, а не как строку base64.

Удачи!:D

Источник

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

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

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

$img = new Image();
$img.src = $('#f').val();
$img.onLoad = function (){
    alert('ok');
}
Источник
Другие вопросы по тегам