Обрезать и загружать изображение на стороне клиента без серверного кода

Ответ 1

Решение, которое я использовал:

Сначала я использую стороннюю библиотеку 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

После того как я нарисовал холст, я преобразовал холст в DataURL, который находится в формате base64. Как только у меня есть 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) {

        }
      });

Ответ 2

ОК, я, наконец, сделал это!!! после поиска целый день! Даже сейчас parse предлагает обрезку на стороне сервера, все равно интересно изменить размер клиентской стороны.

Проверьте это: HTML5 Предварительный просмотр изображений перед загрузкой

Коррекция Justin Levene действительно хороша! Но для работы с 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/"

Удачи!

Ответ 3

Это может быть старый пост, но если вы нашли этот ответ (например, я), вы можете знать, что Parse позволяет теперь обрезать серверы изображений.

Для последнего кода вы должны обратиться к своей документации: https://www.parse.com/docs/cloud_modules_guide#images

Parse Image Object (из документа 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.
  }
});

Обрезать изображение (из документации 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.
  }
});

Вы также можете масштабировать, изменять формат изображения и создавать миниатюры.