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

Question

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

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

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

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

Спасибо,

BK

Answer 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 *

Answer 2

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

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

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

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

Answer 3

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

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

Reading local files using Javascript

Answer 4

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

Удачи вам! : D