我已经使用html画布实现了javascript图像裁剪功能.它在chrome和IE上运行得很好(?！），但在firef

https://jsfiddle.net/1gf6xzyz/3/是小提琴的链接。我将指出JS代码中的重要点以及正在尝试的内容。

第22行：这是我将cropper附加到图像对象的地方。cropper是一个类，它引用图像和具有不言自明名称的选项。重要的是：

• ratioDim—裁剪窗口的纵横比

• maxCaptureWidth-可以裁剪的图像的最大宽度。

  cropper = new Cropper.Img('imgSelector', {
                      minWidth : 120,
                      minHeight : 90,
                      ratioDim : {
                          x : 120,
                          y : 90
                      },
                      displayOnInit : true,
                      imageDataCallback : imageDataCallback,
                      maxCaptureWidth : 400,
                  })
  

作物库从第47行开始。我对现有的图书馆进行了改造以满足我的需要。

第357行-这是在图像加载后将cropper连接到图像的位置。所发生的转换列为从358到386。

    onLoad : function() {
            /*
             * Build the container and all related elements, will result in
             * the following
             * 
             * <div class="imgCrop_wrap"> <img ... this.img ... /> <div
             * class="imgCrop_dragArea"> <!-- the inner spans are only
             * required for IE to stop it making the divs 1px high/wide -->
             * <div class="imgCrop_overlay imageCrop_north"><span></span></div>
             * <div class="imgCrop_overlay imageCrop_east"><span></span></div>
             * <div class="imgCrop_overlay imageCrop_south"><span></span></div>
             * <div class="imgCrop_overlay imageCrop_west"><span></span></div>
             * <div class="imgCrop_selArea"> <!-- marquees --> <!-- the
             * inner spans are only required for IE to stop it making the
             * divs 1px high/wide --> <div class="imgCrop_marqueeHoriz
             * imgCrop_marqueeNorth"><span></span></div> <div
             * class="imgCrop_marqueeVert imgCrop_marqueeEast"><span></span></div>
             * <div class="imgCrop_marqueeHoriz imgCrop_marqueeSouth"><span></span></div>
             * <div class="imgCrop_marqueeVert imgCrop_marqueeWest"><span></span></div>
             * <!-- handles --> <div class="imgCrop_handle imgCrop_handleN"></div>
             * <div class="imgCrop_handle imgCrop_handleNE"></div> <div
             * class="imgCrop_handle imgCrop_handleE"></div> <div
             * class="imgCrop_handle imgCrop_handleSE"></div> <div
             * class="imgCrop_handle imgCrop_handleS"></div> <div
             * class="imgCrop_handle imgCrop_handleSW"></div> <div
             * class="imgCrop_handle imgCrop_handleW"></div> <div
             * class="imgCrop_handle imgCrop_handleNW"></div> <div
             * class="imgCrop_clickArea"></div> </div> <div
             * class="imgCrop_clickArea"></div> </div> </div>
             */
    .......
    }

第574行-此函数的初始部分试图根据提供的"maxCaptureWidth"设置图像的最大尺寸。函数的其余部分计算裁剪区域相对于图像的左上和右下坐标。

    var ratioOfContainer = this.img.naturalHeight
                    / this.img.naturalWidth;
    var baseWidth = (this.img.naturalWidth > this.options.maxCaptureWidth) ? this.options.maxCaptureWidth
                    : this.img.naturalWidth;
    var corelatedHeight = baseWidth * ratioOfContainer;
    this.img.width = baseWidth;
    this.img.height = corelatedHeight;
    this.imgW = baseWidth;
    this.imgH = corelatedHeight;

第656行到第658行-这些是负责将图像捕获到画布上的主要功能。selArea是将绘制到画布上的区域。

    this.selArea.show();
    this.drawArea();
    this.endCrop();

第758行-实用程序，以获取作物的宽度。

    calcW : function() {
        return (this.areaCoords.x2 - this.areaCoords.x1);
    }

第768行-实用程序，以获取农作物的高度。

    calcH : function() {
        return (this.areaCoords.y2 - this.areaCoords.y1);
    }

第1170行-绘图区域是保证在调整或移动cropper时调用的函数。它负责根据当前裁剪器位置在图像覆盖上应用样式。

1230行-绘制到画布的功能从这里开始。这部分在IE和Chrome中都能很好地工作。在firefox中，只有当左上角的cropper与左上角图像重合时，它才起作用。并且，挡板的垂直或水平移动会使捕获的图像失真。我已经彻底检查了传递给上下文drawinimage函数的参数，没有发现任何问题。

    var ratioDimHeight = this.img.naturalHeight / this.img.height;
    var ratioDimWidth = this.img.naturalWidth / this.img.width;
    var canvas = document.createElement("canvas");
    canvas.width = areaWidth;
    canvas.height = areaHeight;
    var context = canvas.getContext("2d");              
    context
            .drawImage(
                    this.img,
                    this.areaCoords.x1 * ratioDimWidth,
                    this.areaCoords.y1 * ratioDimHeight,
                    this.img.width * ratioDimWidth,
                    this.img.height * ratioDimHeight,
                    0, 0, this.img.width,
                    this.img.height);
    this.imageData = canvas.toDataURL('image/png');

第1252行-我将裁剪后的图像提取为dataurl，然后使用ajax将其发送到服务器端，在表单submit上提交并将图像字节上传到s3。

我不知道为什么它不能与firefox一起工作，我将非常感谢任何帮助。提前感谢您的考虑。