在不涉及服务器端代码的情况下，在客户端裁剪和上传图像

Crop and upload image on client-side without server-side code involve

本文关键字：裁剪 客户端 图像 情况下 服务器端 代码      更新时间：2023-09-26

正如标题所说。要求是能够在将裁剪的图像上传到服务器之前裁剪图像。所有的工作都应该在客户端上完成。我听说过在服务器上裁剪图像并将其全部保存的方法。

但当我使用Parse.com服务时。服务器端不支持图像操作，所以我需要在本地处理它，并将完成的图像直接上传到Parse.com服务。

示例代码将非常有用。谢谢

我使用的解决方案：

首先，我使用第三方javascript库来选择像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

绘制画布后，我将画布转换为base64格式的DataURL。一旦我得到了DataURL，我就使用我在互联网上找到的这个函数，它将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) {
        }
      });

好吧，我终于成功了！！！搜索了一整天！！即使现在parse建议服务器端裁剪，客户端调整大小仍然很有趣。

检查此项：HTML5上传前预先调整图像大小

贾斯汀·莱文的修正真的很好！但要使用Parse.com，您需要使用

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

这些代码对我有效（例如，我上传了一张2M的照片，重新调整大小的照片大约是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"是实数base64字符串之前的所有字母。dataurl的结果是"data:image/jpeg；base64，/9j/4AAQSkZJRgABAQAAAQABAAD/2……"，我们只需要以"/9j/"开头的部分

祝你好运！

这可能是一篇旧文章，但如果你找到了这个答案（像我一样），你可能想知道Parse现在允许在服务器端裁剪图像。

有关最新代码，请参阅他们的文档：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.
  }
});

您还可以缩放、更改图像格式和创建缩略图。

相关文章：