javascript - 在没有服务器端代码的情况下在客户端裁剪和上传图像

正如标题所说。要求是能够裁剪图像，然后再将裁剪的图像上载到服务器。所有工作应在客户端完成。
我听说过在服务器上裁剪图像并完全保存的方法。

但是，因为我使用Parse.com服务。服务器端不支持图像处理，因此我需要在本地进行处理并将完成的图像直接上传到Parse.com服务。

示例代码将非常有帮助。
谢谢。

最佳答案

我使用的解决方案:

首先，我使用一个第三方JavaScript库来选择裁剪区域，例如jCrop。
一旦获得坐标(x1，x2，y1，y2)，我便将图像的副本绘制到 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

绘制 Canvas 后，我将 Canvas 转换为base64格式的DataURL。
一旦获得DataURL，我便会使用从互联网上找到的此功能，它将Internet中的DataURL转换为原始二进制数据。

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。
上传并以“ia”作为数据进行解析

 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) {

        }
      });