Question

仅当图像的宽度和高度相同（正方形）时才会出现此问题。

我首先在我的网页上加载不同大小的图像 - 然后将图像缩放到宽度= 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);
        }
      };
    });
  });

Answer 1

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

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

1 个答案: