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

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

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

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

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

спасибо,

BK

18
image-processing javascript uploading

4 ответов

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

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

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

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

0

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

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

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

11

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

удачи! : D

2

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

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

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

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