सर्वर-साइड कोड के बिना क्लाइंट-साइड पर छवि को क्रॉप और अपलोड करें

Question

शीर्षक के अनुसार। फसल छवि को सर्वर पर अपलोड करने से पहले एक छवि को फसल करने में सक्षम होना आवश्यक है। सभी काम क्लाइंट-साइड पर किए जाने चाहिए। मैंने सर्वर पर छवि को फसल करने और इसे पूरी तरह से सहेजने के तरीके के बारे में सुना है।

लेकिन जैसा कि मैं Parse.com सेवा का उपयोग करता हूं। सर्वर-साइड पर छवि मैनिपुलेशन के लिए कोई समर्थित नहीं है, इसलिए मुझे इसे स्थानीय रूप से संसाधित करने की आवश्यकता है और सीधे पूर्ण छवि को Parse.com सेवा पर अपलोड करना होगा।

उदाहरण कोड बहुत उपयोगी होगा। धन्यवाद।

Answer 1

समाधान मैं प्रयोग किया है:

सबसे पहले मैं एक 3 पार्टी जावास्क्रिप्ट पुस्तकालय jCrop तरह त्र चुनने के लिए इस्तेमाल करते हैं। एक बार जब मैं निर्देशांक (x1, x2, y1, y2) प्राप्त करता हूं, तो मैं एक छवि की एक प्रति कैनवास में खींचता हूं।

  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 

कैनवास खींचने के बाद, मैंने कैनवास को DataURL प्रारूप में परिवर्तित किया है जो बेस 64 प्रारूप में है। एक बार मुझे डेटाURL मिल गया है, मैं इस फ़ंक्शन का उपयोग इंटरनेट से प्राप्त करता हूं जहां यह डेटाURL को कच्चे बाइनरी डेटा में परिवर्तित करता है।

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; 
} 

जब हमें द्विआधारी डेटा मिला, तो हम इसे सीधे Parse.com पर अपलोड करते हैं। एक डेटा

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

यह एक पुरानी पोस्ट हो सकता है के रूप में 'आइए' के ​​साथ पार्स करने के लिए अपलोड लेकिन अगर आप इस सवाल का जवाब (मेरे जैसे) में पाया गया है, तो आप को पता है कि पार्स छवियों फसल के लिए सर्वर साइड अब अनुमति देता है चाहते हो सकता है।

नवीनतम कोड आप अपनी दस्तावेज़ीकरण का संदर्भ लेना चाहिए के लिए: https://www.parse.com/docs/cloud_modules_guide#images

पार्स छवि वस्तु (पार्स दस्तावेज़ से):

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 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. 
    } 
}); 

आप स्केल कर सकते हैं, छवि प्रारूप बदल सकते हैं, और थंबनेल बना सकते हैं।

Answer 3

ठीक है, मैंने अंततः इसे बनाया !!! पूरे दिन खोजने के बाद !! अब भी पार्स सर्वर साइड क्रॉप का प्रस्ताव देते हैं, क्लाइंट साइड का आकार बदलना अभी भी दिलचस्प है।

चेक करें: HTML5 Pre-resize images before uploading

जस्टिन Levene के सुधार वास्तव में अच्छा काम करता है!

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

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

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

: लेकिन Parse.com के साथ काम करने के लिए, आप

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

ये कोड का उपयोग करने की जरूरत है मेरे लिए काम करता (उदाहरण के लिए, मैं एक 2 एम फोटो, फिर से आकार की फोटो 150k जैसा होगा अपलोड किया गया)

वास्तविक बेस 64 स्ट्रिंग से पहले "23" सभी अक्षर हैं। डेटाोरल का परिणाम "डेटा: छवि/जेपीईजी; बेस 64,/9जे/4 एएचक्यूकेजेजेजेआरबीएबीएएएएएक्यूएबीएएडएड/2 ....../ 9j/"

गुड लक", हम सिर्फ भाग द्वारा शुरू की जरूरत है "!