jquery 裁剪插件尺寸的角度指令在移动设备上已关闭

Posted 2023-02-25

【中文标题】jquery 裁剪插件尺寸的角度指令在移动设备上已关闭

【英文标题】：angular directive of jquery crop plugin dimensions are off on mobile devices

【发布时间】：2015-02-05 06:45:43

【问题描述】：

我已经在 angularJS、Guillotine (https://github.com/matiasgagliano/guillotine) 和 Image Cropper (http://fengyuanchen.github.io/cropper/) 中实现了 2 个 jquery crop 插件作为自定义指令。

两者都可以在桌面上正常检索裁剪尺寸（x、y、宽度、高度），但在移动设备上，虽然裁剪尺寸在技术上是正确的，但图像的大小并未考虑在内。因此，裁剪结果只是所需裁剪区域的一小部分。

我该如何解决这个问题？

更新:: 我意识到这很可能是服务器问题。出于某种原因，虽然服务器正确设置了与在桌面上裁剪的原始照片的比例，但它不会对从移动设备加载的图像执行此操作。

这是（为简洁起见而编辑的）角度指令，适用于 Guillotine。

    (function () 
        angular.module('Crop').directive('skCrop', ['$sce', '$route', '$cookieStore', 'putService', 'picService', 'deleteService', function($sce, $route, $cookieStore, putService, picService, deleteService) 
            return 
            restrict: 'E',
            templateUrl: '/pic/crop.html',
            scope: 
                pic: '@',
            ,
            link: function( scope, el, atts) 
                var picture = angular.element('#picture');
                var cropDims = ;

                scope.crop = function() 
                    var data =angular.element(el).find('img').guillotine('getData');
                    cropDims.x = data.x;
                    cropDims.y = data.y;
                    cropDims.width = data.w;
                    cropDims.height = data.h;
                    // $http PUT to server here
                ;


                scope.$watch('pic', function () 
                    picture[0].onload = function () 
                        width = this.width;
                        height = this.height;
                        if (width > 0) 
                            picture.guillotine(
                                width: 500,
                                height: 500    
                            ); // end picture.guillotine
                        


                    ;// end picture.onload

                ); // end scope.$watch


             // end link
        ; // end return

    ]);


)();

html片段：

    <sk-crop pic="obj.user.picfull">
    </sk-crop>

skCrop 模板：

<section>
  <div class="img-container">
    <img id="picture" ng-src="trustSrc(pic)"/>
  </div>
  <div class="form-group">
    <button class="btn btn-default" ng-click="clear()">Remove</button>
    <button class="btn btn-primary" ng-click="crop()">Save</button>
  </div>
</section>

css:

    .img-container 
      width: 100%;
      height: auto;
      max-width: 500px;
      margin-left: 0 auto;
      margin-right: 0 auto;
      display: block;
    

【参考方案1】：

您能否发布您在服务器上获得的数据并描述其使用方式？可能是服务器端裁剪器误解了比例。

我不使用 Angular，但请记住，如果您更改目标图像的源，则应删除该插件并重新初始化该插件。因此，如果您将初始化程序放在观察者中，如果图像 src 发生变化，您可能会安装插件的多个实例。

【讨论】：

发布到服务器的数据是作为 JSON 对象的裁剪尺寸。 code "x":95.99999999999999,"y":256,"width":768.0000000000001,"height":768.0000000000001 code.我不确定服务器如何使用数据。我会问！

那里缺少 scale 和 angle，Guillotine 的输出（通过 getData）类似于： scale: 1.4, angle: 270, x: 10, y: 20, w: 400, h: 300 .不应用 scale 应该会导致您没有考虑图像大小的问题。