Hình ảnh cắt xén phía máy khách

Question

Tôi muốn sử dụng javascript hoặc jQuery để cắt và nén hình ảnh ở phía máy khách trước khi tải lên máy chủ.

workflow:

1. Chọn ảnh
2. Crop Image để kích thước cụ thể
3. Nén vụ
4. Tải lên

Có ai làm điều này trước đây chưa? Plugin nào hoặc tôi phải làm gì?

Tôi thấy facebook có thể thực hiện nén hình ảnh và tự động thay đổi kích thước hình ảnh trước khi tải lên.

Answer 1

EDIT (2014): Câu trả lời này giờ đã lỗi thời! JavaScript là ngôn ngữ lập trình có triển khai có ảnh hưởng sâu sắc đến bởi tài nguyên trình duyệt nào đang được cung cấp cho họ. Ba năm trước khi bài đăng này được tạo (tháng 7 năm 2011), các trình duyệt không có bất kỳ chức năng nào đáng tin cậy sẽ cho phép OP thực hiện những gì mà anh ta yêu cầu, do đó tôi trả lời.
Nếu bạn vẫn quan tâm đến cách thực hiện việc này, vui lòng tham khảo một số câu trả lời cho câu hỏi này đã xuất hiện trong thời gian chờ đợi trên SO. Nhưng hãy kiềm chế bản thân từ việc đưa ra bất kỳ ý kiến ​​nào thêm cho câu trả lời này vì nó rõ ràng là vô nghĩa. Cảm ơn bạn.

Chỉ cần đặt JavaScript không có nghĩa là làm những gì bạn đang yêu cầu. Bất kể dịch vụ nào bạn gặp phải cung cấp khả năng thao tác các hình ảnh được chọn, bạn có thể đặt cược tiền của mình rằng hình ảnh đã được tải lên hoàn toàn đến máy chủ trước khi bất kỳ chức năng nào khác được cung cấp.

Answer 2

Bạn có thể cắt chúng bằng HTML5 Canvas:

http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

Answer 3

Bạn có thể làm điều đó bằng base64, nhìn vào trang web của tôi đang làm việc với: http://www.wordirish.com tất cả các hình ảnh được chế tác về phía khách hàng sử dụng HTML5 hoặc flash cho các trình duyệt cũ.

bạn chỉ cần làm điều đó:

function thisFunctionShoulBeCallByTheFileuploaderButton(e){ 
    e.preventDefault && e.preventDefault(); 
    var image, canvas, i; 
    var images = 'files' in e.target ? e.target.files : 'dataTransfer' in e ? e.dataTransfer.files : []; 
    if(images && images.length) { 
     for(i in images) { 
      if(typeof images[i] != 'object') continue; 
      image = new Image(); 
      image.src = createObjectURL(images[i]); 
      image.onload = function(e){ 
       var mybase64resized = resizeCrop(e.target, 200, 150).toDataURL('image/jpg', 90); 
       alert(mybase64resized); 
      } 
     }   
    } 
} 

function resizeCrop(src, width, height){ 
    var crop = width == 0 || height == 0; 
    // not resize 
    if(src.width <= width && height == 0) { 
     width = src.width; 
     height = src.height; 
    } 
    // resize 
    if(src.width > width && height == 0){ 
     height = src.height * (width/src.width); 
    } 

    // check scale 
    var xscale = width/src.width; 
    var yscale = height/src.height; 
    var scale = crop ? Math.min(xscale, yscale) : Math.max(xscale, yscale); 
    // create empty canvas 
    var canvas = document.createElement("canvas");     
    canvas.width = width ? width : Math.round(src.width * scale); 
    canvas.height = height ? height : Math.round(src.height * scale); 
    canvas.getContext("2d").scale(scale,scale); 
    // crop it top center 
    canvas.getContext("2d").drawImage(src, ((src.width * scale) - canvas.width) * -.5 , ((src.height * scale) - canvas.height) * -.5); 
    return canvas; 
} 

function createObjectURL(i){ 
    var URL = window.URL || window.webkitURL || window.mozURL || window.msURL; 
    return URL.createObjectURL(i); 
} 

miếng bánh;)

Answer 4

Trình duyệt hiện tại bây giờ hỗ trợ rất nhiều thao tác hình ảnh qua jquery và html5 canvas. Công cụ có thể được sử dụng để đạt được điều này bao gồm:

Resize & Crop for Jquery (ClientSide)

Pixastic Image Processing Library

HTML5 Canvas Image Optimization

Tôi hy vọng rằng chứng minh hữu ích cho bất cứ ai tìm kiếm giải pháp tương tự ...