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

Ответ 1

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

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

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

* [EDIT] С 2010 года, поскольку на этот вопрос был дан ответ, технология продвинулась, html теперь имеет возможность создавать и манипулировать в браузере. см. более новые ответы или эти примеры: http://davidwalsh.name/resize-image-canvas http://deepliquid.com/content/Jcrop.html *

Ответ 2

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

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

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

Ответ 3

Да, вы можете! Но для этого браузер должен поддерживать локальное хранилище! Это HTML5 api, поэтому большинство современных браузеров смогут это сделать! Помните, что localstorage может сохранять только строковые данные, поэтому вы должны менять изображения в строку 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 string.

Удачи!: D

Ответ 4

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

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

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

$img = new Image();
$img.src = $('#f').val();
$img.onLoad = function (){
    alert('ok');
}