Adobe HTML5MartImage：通过禁用drap drop，使用pathfield作为图像源

我希望使用HTML5 SmartImage小部件，而不允许用户从桌面上传图像，同时避免使用contentfinder。我创建了一个带有pathfield和HTML5 SmartImage输入的对话框。我已将“allowUpload”设置为false。我希望用户使用pathfield组件输入/拾取图像，然后将其用作源图像引用，以在HTML5MartImage小部件中呈现图像。到目前为止，我还没有取得成功，如有任何帮助/提示，将不胜感激：）。以下是我迄今为止所尝试的：

为pathfield和FileReferenceParameter设置相同的“name”值，希望拾取用户输入到smartimage中的pathfield，但POST会导致发送两个“/srcImageReference”参数，导致pathfield更改为jcr节点上的字符串[]，从而每次连接相同的路径

我已经通过widgets.js找到了一个可用的事件函数，它在drap拖放完成时被调用，因此我可以用pathfield中的值模拟一个类似的函数，但我找不到任何函数

扩展smartimage组件和覆盖默认drap drop处理程序是唯一的选项吗？如果是的话，我该怎么做呢

谢谢

---

Viper

如果您只想使用HTML5 SmartImage预览在pathfield中选择的图像，可以尝试以下操作：

使用常规面板代替HTML5 SmartImage，并使用其html属性在面板中显示图像。可以从带有标记的pathfield中的侦听器调用面板的body.update（）方法来创建预览图像

<tab1 jcr:primaryType="cq:Panel" title="Tab 1">
<items jcr:primaryType="cq:WidgetCollection">
  <ImagePathField jcr:primaryType="cq:Widget" fieldLabel="Select Image" 
           name="./imagePath" rootPath="/content/dam" xtype="pathfield">
    <listeners jcr:primaryType="nt:unstructured" 
       dialogselect="function(pathfield,currentpath,anchor) {

            //dialogselect event - fired when a selection 
            //is made using pathfield's browse dialog
            //get the sibling panel through the pathfield

            var previewPanel = pathfield.nextSibling();

            //update the html property of panel to contain the
            //image selected in the pathfield using panel body's update method

            previewPanel.body.update('<img style="max-width: 100%;display: block;
                                      margin-left:auto;margin-right:auto;" 
                                      src="'+currentpath+'"/>');  
        }" 
       loadcontent="function(pathfield,record,path){ 

       //preview the image when dialog is opened for the first time
       var previewPanel = pathfield.nextSibling(); 

       if(pathfield.getValue() != '')  
       previewPanel.body.update('<img style="max-width: 100%;display: block;
                                  margin-left:auto;margin-right:auto;" 
                                  src="'+pathfield.getValue()+'"/>'); 
       }"/>
  </ImagePathField>
  <previewPanel jcr:primaryType="cq:Widget" fieldLabel="Preview Pane"
               height="250" html="No image to preview" xtype="panel"/>
</items>
</tab1>

具有一个

handleDrop（对象dragData）

方法，当在其上拖放图像时会调用该方法。我们可以从的

对话框select

事件中调用它

从本质上讲，这就像假装一个拖放。dragData有很多字段，但在这种情况下，重要的是图像路径和名称（来源：handleDrop方法中的console.log（）s）。因此，当在pathfield中选择图像路径时，使用其路径并创建hoax dragData对象并调用图像的handleDrop方法

function(pathfield,path,anchor){ 
    var dialog = pathfield.findParentByType('dialog');
    var image = dialog.findByType('html5smartimage')[0]; 
    var pathArray = path.split('/'); 
    var imageName = pathArray[(pathArray.length-1)]; 
    var fakeDragData = {}; 
    var fakeRecord = {}; 
    fakeRecord.path = path; 
    fakeRecord.name = imageName; 
    fakeRecord.get = function(name){ return this[name]; }; 
    fakeDragData.records = new Array(fakeRecord); 
    fakeDragData.single = true; 
    image.handleDrop(fakeDragData);
}

---

通过这种方式，所有图像数据都由html5smart图像小部件本身存储在节点上，您根本不需要读取jsp中pathfield的值

我们的用户希望使用裁剪/旋转/贴图功能。因此，我想使用通过pathfield.Firstoff选择的路径初始化smartimage小部件-非常感谢您提供完整的代码，Sharath！我也在看handleDrop方法，但当我在firebug中查看dragData对象时，有很多元数据（UI对象ID和数组）。您是如何获得必填字段的？我看到dragdata有很多地方在原始方法调用中填充路径。dragdata对象有大量数据。小部件所需的字段是用handleDropBasics方法提取的，这只使用了答案中提到的3个字段。