6 examples of 'cropit js' in JavaScript

41
function crop(callback) {
42
  if (!apos.attachments.options.croppable[attachment.extension]) {
43
    return callback(null);
44
  }
45
  var width = attachment.width;
46
  var height = attachment.width / aspectRatio;
47
  var left = 0;
48
  var top = (attachment.height - height) / 2;
49
  if (height > attachment.height) {
50
    width = attachment.height * aspectRatio;
51
    height = attachment.height;
52
    left = (attachment.width - width) / 2;
53
    top = 0;
54
  }
55
  return apos.attachments.api(
56
    'crop',
57
    {
58
      _id: attachment._id,
59
      crop: { top: top, left: left, width: width, height: height }
60
    },
61
    function(data) {
62
      if (data.status !== 'ok') {
63
        apos.notify('An error occurred while cropping.', { type: 'error', dismiss: true });
64
        return callback('fail');
65
      }
66
      choice.top = top;
67
      choice.left = left;
68
      choice.width = width;
69
      choice.height = height;
70
      return callback(null);
71
    }
72
  );
73
}

41
async makeClientCrop(crop, pixelCrop) {
42
  if (this.imageRef && crop.width && crop.height) {
43
    console.log("没有走过这里吗");
44
    const croppedImageUrl = await this.getCroppedImg(
45
      this.imageRef,
46
      pixelCrop,
47
      "newFile.jpeg"
48
    );
49
    await this.setState({ croppedImageUrl: croppedImageUrl });
50
    this.props.readCropImgUrl(this.state.croppedImageUrl);
51
  }
52
}

60
function initJcrop(width, height) {
61
  $('#avatar-update').Jcrop(
62
    {
63
      onSelect: showCoords,
64
      setSelect: [0, 0, width, height],
65
      aspectRatio: 10 / 12,
66
    },
67
    function() {
68
      jcrop_api = this;
69
    }
70
  );
71
}

59
getCroppedImg(image, pixelCrop, fileName) {
60
  const canvas = document.createElement('canvas');
61
  canvas.width = pixelCrop.width;
62
  canvas.height = pixelCrop.height;
63
  const ctx = canvas.getContext('2d');
64
65
  ctx.drawImage(
66
    image,
67
    pixelCrop.x,
68
    pixelCrop.y,
69
    pixelCrop.width,
70
    pixelCrop.height,
71
    0,
72
    0,
73
    pixelCrop.width,
74
    pixelCrop.height,
75
  );
76
77
  return new Promise((resolve, reject) => {
78
    canvas.toBlob(blob => {
79
      blob.name = fileName;
80
      window.URL.revokeObjectURL(this.fileUrl);
81
      this.fileUrl = window.URL.createObjectURL(blob);
82
      resolve(this.fileUrl);
83
    }, 'image/jpeg');
84
  });
85
}

234
function partCrop() {
235
236
    if (prop >= magickprop){
237
238
        fullCrop();
239
240
    } else {
241
242
        var v = features.width;
243
        var h = features.width/magickprop;
244
245
        var deltaH = features.height - h;
246
247
        im.convert([fileName, "-crop", v + "x" + h + "+0+" + deltaH/2, fileTemp], function(){
248
            imResize(fileTemp, width, height, fileSlide, function(){
249
250
                fileUnlink(fileTemp, function(err){
251
252
                    if (err){
253
                        callback(err);
254
                    } else {
255
                        callback(null, "Success");
256
                    }
257
                });
258
            })
259
        })
260
    }
261
}

106
toggleCropper () {
107
  // the cropper is mandatory
108
  const $formGroup = $('[data-role="cropper-is-mandatory-form-group"]')
109
  const $warning = $('[data-role="cropper-is-mandatory-message"]')
110
  const $checkbox = $('[data-role="enable-cropper-checkbox"]')
111
112
  if (this.config.currentAspectRatio === false) {
113
    $formGroup.removeClass('has-warning')
114
    $warning.addClass('d-none')
115
    $checkbox.removeClass('disabled').attr('disabled', false).attr('checked', false)
116
117
    return
118
  }
119
120
  $formGroup.addClass('has-warning')
121
  $warning.removeClass('d-none')
122
  $checkbox.addClass('disabled').attr('disabled', true).attr('checked', true)
123
}