Cắt và tải lên hình ảnh ở phía máy khách mà không cần mã phía máy chủ liên quan đến

Question

Như tiêu đề đã nói. Yêu cầu là có thể cắt ảnh trước khi tải ảnh đã cắt lên máy chủ. Tất cả công việc phải được thực hiện ở phía máy khách. Tôi đã nghe nói về phương pháp cắt hình ảnh trên máy chủ và lưu nó hoàn toàn.

Nhưng khi tôi sử dụng dịch vụ Parse.com. Không có hỗ trợ cho thao tác hình ảnh ở phía máy chủ vì vậy tôi cần xử lý nó cục bộ và tải hình ảnh đã hoàn thành trực tiếp lên dịch vụ Parse.com.

Mã mẫu sẽ rất hữu ích. Cảm ơn.

Answer 1

Giải pháp tôi sử dụng:

Trước tiên tôi sử dụng một bên thứ 3 javascript thư viện để chọn vùng cắt như jCrop. Khi tôi đã nhận được tọa độ (x1, x2, y1, y2), tôi vẽ một bản sao của hình ảnh vào canvas.

  var canvas = document.getElementById('drawcanvas'); 
      var context = canvas.getContext('2d'); 
      canvas.width = canvas.width; // clear canvas 
      var imageObj = new Image(); 
      imageObj.onload = function() { 
      // draw cropped image 
      // ... 

      context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, sourceWidth, sourceHeight); 

      var dataURL = canvas.toDataURL(); 
      }; 
      imageObj.src = // image url 

Sau khi tôi vẽ canvas, tôi đã chuyển canvas thành một DataURL có định dạng base64. Khi tôi đã có DataURL, tôi sử dụng chức năng này tôi tìm thấy từ internet, nơi nó chuyển đổi DataURL thành dữ liệu nhị phân thô.

DataURLConverter: function(data) { 
     // convert base64 to raw binary data held in a string 
     // doesn't handle URLEncoded DataURIs 
     var byteString = atob(data.split(',')[1]); 

     // separate out the mime component 
     var mimeString = data.split(',')[0].split(':')[1].split(';')[0] 

     // write the bytes of the string to an ArrayBuffer 
     var ab = new ArrayBuffer(byteString.length); 
     var ia = new Uint8Array(ab); 
     for (var i = 0; i < byteString.length; i++) { 
      ia[i] = byteString.charCodeAt(i); 
     } 
      return ia; 
} 

Khi chúng tôi nhận dữ liệu nhị phân, chúng tôi sẽ tải trực tiếp lên Parse.com. Tải lên để phân tích với 'ia' như một dữ liệu

var serverUrl = 'https://api.parse.com/1/files/' + fileName; 
     $.ajax({ 
     type: "POST", 
     beforeSend: function(request) { 
      request.setRequestHeader("X-Parse-Application-Id", "App id"); 
      request.setRequestHeader("X-Parse-REST-API-Key", "API Key"); 
      request.setRequestHeader("Content-Type", "File type"); 
     }, 
     url: serverUrl, 
     data: ia, 
     processData: false, 
     contentType: false, 
     success: function(data) { 

     }, 
     error: function(data) { 

     } 
     }); 

Answer 2

Đây có thể là một bài cũ nhưng nếu bạn tìm thấy câu trả lời này (như tôi), bạn có thể muốn biết rằng Parse bây giờ cho phép để cắt hình ảnh phía máy chủ.

Đối với mã mới nhất, bạn nên tham khảo tài liệu của họ: https://www.parse.com/docs/cloud_modules_guide#images

Parse ảnh Object (từ tài liệu Parse):

var Image = require("parse-image"); 

Parse.Cloud.httpRequest({ 
    url: object.get("profilePhoto").url(), 
    success: function(response) { 
    // The file contents are in response.buffer. 
    var image = new Image(); 
    return image.setData(response.buffer, { 
     success: function() { 
     console.log("Image is " + image.width() + "x" + image.height() + "."); 
     }, 
     error: function(error) { 
     // The image data was invalid. 
     } 
    }) 
    }, 
    error: function(error) { 
    // The networking request failed. 
    } 
}); 

Crop hình ảnh (từ tài liệu Parse):

// Crop the image to the rectangle from (10, 10) to (30, 20). 
image.crop({ 
    left: 10, 
    top: 10, 
    right: 30, 
    bottom: 20, 
    success: function(image) { 
    // The image was cropped. 
    }, 
    error: function(error) { 
    // The image could not be cropped. 
    } 
}); 

Bạn cũng có thể chia tỷ lệ, thay đổi định dạng hình ảnh và tạo hình thu nhỏ.

Answer 3

OK, cuối cùng tôi đã thực hiện nó !!! sau khi tìm kiếm cả ngày !! Ngay cả bây giờ phân tích cú pháp đề xuất cắt xén phía máy chủ, nó vẫn thú vị để thay đổi kích thước phía máy khách.

Kiểm tra này: chỉnh HTML5 Pre-resize images before uploading

Justin Levene của hoạt động thực sự tốt! Nhưng để làm việc với Parse.com, bạn cần phải sử dụng

new Parse.File(name, {base64: somebase64string}); 

Các mã này làm việc cho tôi (ví dụ, Tôi đã tải lên một bức ảnh 2M, các bức ảnh lại có kích thước sẽ như 150k):

var dataurl = canvas.toDataURL("image/jpeg"); 

      var name = "image.jpg"; 
      var parseFile = new Parse.File(name, {base64: dataurl.substring(23)}); 

      parseFile.save().then(function() { .... 

"23" là tất cả các chữ cái trước chuỗi base64 thực. kết quả của dataurl là "dữ liệu: hình ảnh/jpeg; base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2 ......", Chúng ta chỉ cần một phần bắt đầu bằng "/ 9j /"

Chúc may mắn!