Tải hình ảnh cục bộ vào trình duyệt bằng JavaScript?

Question

Tôi hiện đang phát triển một giải pháp cho ứng dụng in trên nền web, in.

Một trong những tính năng tôi muốn đưa vào là khả năng 'chỉnh sửa' (cắt/chia tỷ lệ/xoay) một hình ảnh nhất định, trước khi tiếp tục đặt hàng áp phích cho hình ảnh đã nêu.

Để tránh các yêu cầu của người dùng tải lên các hình ảnh đến một máy chủ từ xa trước khi chỉnh sửa, tôi muốn biết những điều sau:

Có thể (dùng JavaScript) để tải một hình ảnh được lưu trữ trên máy khách máy vào bộ nhớ trình duyệt/trình duyệt để chỉnh sửa, mà không cần tải hình ảnh lên máy chủ từ xa? Và nếu vậy, làm thế nào được thực hiện?

Cảm ơn,

BK

Answer 1

Sử dụng HTML/JavaScript bạn chỉ có thể chọn các file bằng cách sử dụng thành phần upload file html (Tôi nghĩ rằng Flash/Silverlight bọc này để làm cho mọi việc dễ dàng hơn nhưng nó vẫn sandboxed)

Tuy nhiên, bạn có thể sử dụng Java Applet (hoặc bất cứ điều gì họ gọi là những ngày này), Điều khiển ActiveX gốc hoặc .Net Controls để cung cấp chức năng bổ sung (điều này có nghĩa bảo mật và VM/Runtimes Frameworks vv)

Adobe Air hoặc công nghệ phía khách hàng khác có thể hoạt động, nhưng có vẻ như bạn muốn làm điều này trong JavaScript. Trong trường hợp này, việc tải tệp lên máy chủ và thao tác từ đó là đặt cược tốt nhất.

* [EDIT] Từ năm 2010, vì câu hỏi này đã được trả lời, công nghệ đã chuyển sang, html giờ đây có khả năng tạo và thao tác trong trình duyệt. xem câu trả lời mới hơn hoặc các ví dụ: http://davidwalsh.name/resize-image-canvas http://deepliquid.com/content/Jcrop.html *

Answer 2

Tôi chỉ cố gắng để làm điều đó, nhưng với chrome Tôi nhận được thông báo này:

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

khi tôi làm điều này:

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

Answer 3

Hình ảnh có thể được chỉnh sửa mà không cần người dùng tải ảnh lên máy chủ.

Hãy xem liên kết bên dưới. Nó có thể được thực hiện khá dễ dàng.

Reading local files using Javascript

Answer 4

Có bạn có thể! Nhưng để làm được điều đó, trình duyệt phải hỗ trợ bộ nhớ cục bộ! Đó là HTML5 api nên hầu hết các trình duyệt hiện đại đều có thể làm được! Hãy nhớ rằng localstorage chỉ có thể lưu dữ liệu chuỗi để bạn phải thay đổi hình ảnh thành một chuỗi màu. Nguồn hình ảnh YOur sẽ trông giống như thế này

Đây là đoạn mã ngắn sẽ giúp bạn!

   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 } 

Hy vọng bạn sẽ thấy đoạn mã ngắn này hữu ích.Hãy nhớ rằng Localstorage chỉ lưu dữ liệu chuỗi để bạn không thể

Oh và bằng cách này nếu bạn đang sử dụng jcrop để cắt xén hình ảnh, bạn phải lưu mã blob từ hình ảnh vào biểu mẫu và gửi mã đó đến máy chủ theo cách thủ công vì chỉ jcrop xử lý hình ảnh dưới dạng tệp không phải là chuỗi base64.

Chúc may mắn! : D