在html5smartimage上设置默认裁剪纵横比

Question

我已经成功地更改了html5smartimage组件的aspectRatioConfig，将默认的“自由裁剪”替换为自定义的纵横比，但是我正在努力寻找一种方法来选择自定义的纵横比作为裁剪图像时的默认选择。本质上，我希望默认为我的自定义纵横比，而不是让用户从纵横比列表中选择它(在本例中只有一个值)。这个是可能的吗？有人能帮上忙吗？

这是我用自定义配置替换自由裁剪的代码，我以为设置可用宽高比的校验值(在下面的initComponent中)会触发选定的事件，但它也没有出现。如何默认选定的纵横比？或者触发所选事件？

(function($, undefined) {

/**
 * Determine the scaling ratio the image component might have applied
 *
 * @param data contains `imgWidth` and `imgHeight` keys
 * @returns {number} is the scaling ratio, 1 if no scaling was applied.
 */
function getScalingRatio(data) {
    var scaleRatio = 1;

    if (data.imgWidth > 1280 || data.imgHeight > 1280) {
        if (data.imgWidth > 1280) {
            scaleRatio = 1280 / data.imgWidth;
        } else {
            scaleRatio = 1280 / data.imgHeight;
        }
    }

    return scaleRatio;
}

/**
 * Wrapper for the HTML5 aspect ratio aware
 *
 * @type {void|*}
 */
window.CQTG = $.extend(window.CQTG || {}, {

    Html5SmartImageWrapper: CQ.Ext.extend(CQ.Ext.Panel, {

        /**
         * Initialize panel
         *
         * @param originalConfig
         */
        constructor: function (originalConfig) {

            // initialize the container so we get some useful information
            CQTG.Html5SmartImageWrapper.superclass.constructor.call(this, $.extend({}, originalConfig, {
                layout: 'fit',
                bodyStyle: 'padding: 0;',
                items: {
                    title: null,
                    header: false,
                    frameHeader: false,
                    border: false
                }
            }));

            // find the data path for this container instance
            originalConfig.imagePath = this.findParentByType('dialog').responseScope.path;

            // get rid of panel and replace with smart image
            this.removeAll();

            // add add html5 smart image to the container
            this.add(new CQTG.Html5SmartImage(originalConfig));
        }
    }),

    Html5SmartImage: CQ.Ext.extend(CQ.html5.form.SmartImage, {

        /**
         * Initialize data-members
         *
         * @param config
         */
        constructor: function (config) {
            config = config || {};

            var aInfo = this.getAspectRatioString(config.imagePath);

            // setup some default values
            config = CQ.Util.applyDefaults(config, {
                    "cropConfig": {
                        "aspectRatios": {
                            "newsholeCrop": {
                                "text": "Newshole crop",
                                "value": aInfo.aspectRatio
                            }
                        }
                    }
                }
            );

            CQTG.Html5SmartImage.superclass.constructor.call(this, config);

            // first tool is the crop (rest has been disabled)
            this.imageToolDefs[0].cropMinWidth = aInfo.minWidth;
            this.imageToolDefs[0].cropMinHeight = aInfo.minHeight;

        },

        /**
         * Retrieve the bounding box and concoct a aspect ratio based on it
         *
         * There is some additional magic here because the image component uses a rendition,
         * not the original and bases all its pixel calculations on it without scaling it back
         * up. That is why the scaleRatio is determined
         */
        getAspectRatioString: function (cmpPath) {

            var
                boundingBoxLocation = cmpPath.substring(0, cmpPath.lastIndexOf('/')),
                data = CQ.Util.eval(boundingBoxLocation + ".crop.json"),
                roundX = Math.ceil(data.aspectX * 100),
                roundY = Math.ceil(data.aspectY * 100),
                scaleRatio = getScalingRatio(data)
            ;

            return {
                aspectRatio: (roundX + "," + roundY),
                minWidth: Math.ceil(data.minCropWidth * scaleRatio),
                minHeight: Math.ceil(data.minCropHeight * scaleRatio)
            };
        },

        initComponent: function () {
            CQTG.Html5SmartImage.superclass.initComponent.call(this);

            var cropTool = null;

            CQ.Ext.each(this.imageToolDefs, function(tool){
                if(tool.toolId == "smartimageCrop"){
                    cropTool = tool;
                }
            });

            var userInterface = cropTool.userInterface;

            this.on("loadimage", function(){
                var aRatios = userInterface.aspectRatioMenu.findByType("menucheckitem");

                if(!aRatios[0].checked || !aRatios[0].initialConfig.checked){
                    aRatios[0].checked = true;
                    aRatios[0].initialConfig.checked = true;
                }



            });
        }
    })
});

CQ.Ext.reg("ffx.html5smartimage", CQTG.Html5SmartImageWrapper);

})($CQ);

Answer 1

这是我自己整理的……当我最初发布这篇文章的时候，其实我离得并不太远。我只需要找到正确的事件来触发aspectRatio更新。原来我需要重写smartImage.js toolClicked()方法并通过setAspectRatioUI重置aspectRatio，然后重新触发onRatioChanged

(function($, undefined) {

/**
 * Determine the scaling ratio the image component might have applied
 *
 * @param data contains `imgWidth` and `imgHeight` keys
 * @returns {number} is the scaling ratio, 1 if no scaling was applied.
 */
function getScalingRatio(data) {
    var scaleRatio = 1;

    if (data.imgWidth > 1280 || data.imgHeight > 1280) {
        if (data.imgWidth > 1280) {
            scaleRatio = 1280 / data.imgWidth;
        } else {
            scaleRatio = 1280 / data.imgHeight;
        }
    }

    return scaleRatio;
}

/**
 * Wrapper for the HTML5 aspect ratio aware
 *
 * @type {void|*}
 */
window.CQTG = $.extend(window.CQTG || {}, {

    Html5SmartImageWrapper: CQ.Ext.extend(CQ.Ext.Panel, {

        /**
         * Initialize panel
         *
         * @param originalConfig
         */
        constructor: function (originalConfig) {

            // initialize the container so we get some useful information
            CQTG.Html5SmartImageWrapper.superclass.constructor.call(this, $.extend({}, originalConfig, {
                layout: 'fit',
                bodyStyle: 'padding: 0;',
                items: {
                    title: null,
                    header: false,
                    frameHeader: false,
                    border: false
                }
            }));

            // find the data path for this container instance
            originalConfig.imagePath = this.findParentByType('dialog').responseScope.path;

            // get rid of panel and replace with smart image
            this.removeAll();

            // add add html5 smart image to the container
            this.add(new CQTG.Html5SmartImage(originalConfig));
        }
    }),

    Html5SmartImage: CQ.Ext.extend(CQ.html5.form.SmartImage, {

        /**
         * Initialize data-members
         *
         * @param config
         */
        constructor: function (config) {
            config = config || {};

            var aInfo = this.getAspectRatioString(config.imagePath);

            // setup some default values
            config = CQ.Util.applyDefaults(config, {
                    "cropConfig": {
                        "aspectRatios": {
                            "newsholeCrop": {
                                "text": "Newshole crop",
                                "value": aInfo.aspectRatio,
                                "checked": true
                            }
                        }
                    }
                }
            );

            CQTG.Html5SmartImage.superclass.constructor.call(this, config);

            // first tool is the crop (rest has been disabled)
            this.imageToolDefs[0].cropMinWidth = aInfo.minWidth;
            this.imageToolDefs[0].cropMinHeight = aInfo.minHeight;

        },

        /**
         * Retrieve the bounding box and concoct a aspect ratio based on it
         *
         * There is some additional magic here because the image component uses a rendition,
         * not the original and bases all its pixel calculations on it without scaling it back
         * up. That is why the scaleRatio is determined
         */
        getAspectRatioString: function (cmpPath) {

            var
                boundingBoxLocation = cmpPath.substring(0, cmpPath.lastIndexOf('/')),
                data = CQ.Util.eval(boundingBoxLocation + ".crop.json"),
                roundX = Math.ceil(data.aspectX * 100),
                roundY = Math.ceil(data.aspectY * 100),
                scaleRatio = getScalingRatio(data)
                ;

            return {
                aspectRatio: (roundX + "," + roundY),
                minWidth: Math.ceil(data.minCropWidth * scaleRatio),
                minHeight: Math.ceil(data.minCropHeight * scaleRatio)
            };
        },
        /**
         * override smartImage toolClicked and set default cropTool to "Newshole crop"
         */
        toolClicked: function(cropTool) {

            cropTool = null;

            CQ.Ext.each(this.imageToolDefs, function(tool){
                if(tool.toolId == "smartimageCrop"){
                    cropTool = tool;
                }
            });

            CQTG.Html5SmartImage.superclass.toolClicked.call(this, cropTool);

            var userInterface = cropTool.userInterface;
            var aRatios = userInterface.aspectRatioMenu.findByType("menucheckitem");
            if(!aRatios[0].checked){
                aRatios[0].checked = true;
            }
            userInterface.setAspectRatioUI(aRatios[0].value);
            userInterface.onRatioChanged(aRatios[0].value, aRatios[0].text);

        }

    })
});

CQ.Ext.reg("ffx.html5smartimage", CQTG.Html5SmartImageWrapper);

})($CQ);