0

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

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

  • ratioDim - 裁剪窗口的纵横比。

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

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

作物库从第 47 行开始。我已经调整了现有库以满足我的需要。

第 357 行 - 这是裁剪器在加载后附加到图像的位置。发生的转换从 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 行 - 绘制区域是在裁剪器调整大小或移动时保证调用的函数。它负责根据当前裁剪器位置在图像叠加层上应用样式。

第 1230 行 - 画布功能从这里开始。这部分在 IE 和 Chrome 中都可以正常工作。在 Firefox 中，它仅在裁剪器左上角与图像左上角重合时才有效。并且裁剪器的垂直或水平移动会扭曲捕获的图像。我已经彻底检查了传递给上下文的 drawimage 函数的参数，并且没有发现任何问题。

    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 将其发送到服务器端，提交表单并将图像字节上传到 s3。

我不知道为什么它不能与 Firefox 一起使用，并且非常感谢任何帮助。提前感谢您的考虑。

4

1 回答 1

0

对我有用的更改如下：

           this.img.width = this.img.width - this.areaCoords.x1;
           this.img.height = this.img.height - this.areaCoords.y1;
           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 * ratioDimWidth,
                            this.img.height * ratioDimHeight);
           this.imageData = canvas.toDataURL('image/png');

           this.img.width = this.img.width + this.areaCoords.x1;
           this.img.height = this.img.height + this.areaCoords.y1;

我必须根据裁剪窗口尺寸减小图像尺寸。Firefox 以某种方式将画布捕获与与其他浏览器不同的图像尺寸相关联。我希望我可以说我以某种聪明的方式解决了它，但是:) 我玩弄了 drawimage 函数并观察了它的行为并得出了这个“hack”。也许它对某人有用。

再次感谢 DEfusion 提供整洁的裁剪库。

于 2015-08-05T12:32:36.477 回答