如何从缩放的图像中裁剪并保持原始图像的纵横比答案

【问题标题】：How to crop from a scaled image and keep the aspect ratio of the original image如何从缩放的图像中裁剪并保持原始图像的纵横比
【发布时间】：2016-04-27 15:14:05
【问题描述】：

只有当图片的宽高相同（正方形）时才会出现这个问题。

我首先在我的网页上加载了一张不同大小的图片 - 然后将图片缩放到宽度 = 304，高度 = 164 并完成裁剪。我需要在缩放图像上映射裁剪坐标、高度和宽度，并对原始图像大小进行裁剪。我需要裁剪后的输出为原始图像的大小。裁剪已正确完成，但坐标和裁剪区域似乎有点偏离。

有些图片很好，但我在使用 5000x5000 的图片时遇到了问题

我正在使用以下代码来裁剪图像：

scope.saveCrop = function(imageUrl) {

    var image;
    image = new Image();
    image.setAttribute('crossorigin', 'anonymous');
    image.onload = function() {
      var blob, canvas, context, cropHeight, cropWidth, cropX, cropY, formData, ratioX, ratioY, requestHeaders;
      canvas = document.createElement('canvas');
      context = canvas.getContext('2d');
      ratioX = image.naturalWidth / 304;
      ratioY = image.naturalHeight / 164;
      cropX = scope.cropData.x * ratioX;
      cropY = scope.cropData.y * ratioY;
      cropWidth = scope.cropData.w / 304 * image.naturalWidth;
      cropHeight = scope.cropData.h / 164 * image.naturalHeight;
      canvas.width = image.naturalWidth;
      canvas.height = image.naturalHeight;
      context.drawImage(image, cropX, cropY, cropWidth, cropHeight, 0, 0, image.naturalWidth, image.naturalHeight);

image.src = imageUrl

您能帮我确定为什么裁剪后的输出坐标不正确吗？

我正在使用 jcrop 库

(function() {

  define(['common', 'jquery-lib/jquery.jcrop.min'], function(app) {
    return app.compileProvider.directive('apiImgCrop', function() {
      return {
        restrict: 'E',
        replace: true,
        scope: {
          isartist: '@',
          src: '=',
          selected: '&',
          updated: '&',
          width: '@',
          height: '@'
        },
        link: function(scope, element, attr) {
          var clear, myImg;
          element.before('<link rel="stylesheet" type="text/css" href="/Content/Views/jquery.jcrop.min.css" />');
          myImg = void 0;
          clear = function() {
            if (myImg) {
              myImg.next().remove();
              myImg.remove();
              return myImg = void 0;
            }
          };
          scope.$watch('src', function(newVal) {
            var ngSrc, ratio;
            clear();
            ratio = 0;
            if (scope.isartist) {
              ratio = 4 / 3;
            } else {
              ratio = 16 / 9;
            }
            if (newVal) {
              ngSrc = newVal + '?width=' + scope.width + '&height=' + scope.height + '&crop=auto';
              element.after('<img id="crop-image" crossorigin="anonymous" />');
              myImg = element.next();
              myImg.attr('src', ngSrc);
              return $(myImg).Jcrop({
                aspectRatio: ratio,
                trackDocument: true,
                onChange: function(x) {
                  if (!scope.$$phase) {
                    return scope.$apply(function() {
                      return scope.updated({
                        coords: x
                      });
                    });
                  }
                },
                onSelect: function(x) {
                  if (!scope.$$phase) {
                    return scope.$apply(function() {
                      return scope.selected({
                        coords: x
                      });
                    });
                  }
                }
              });
            }
          });
          return scope.$on('$destroy', clear);
        }
      };
    });
  });

【问题讨论】：

标签： javascript html5-canvas jcrop

【解决方案1】：

我不知道这对您有帮助，但是您是否尝试过使用 ngImgCropExtended ？该库提供了一些用于裁剪图像的高级功能，包括具有特定纵横比的裁剪图像。希望这可能会有所帮助

【讨论】：