Question

我正在尝试构建裁剪工具。其中，“method1”是来自控制器的函数，它呈现“first.gsp”，它也传递一个字符串列表（图像的byte64编码字符串）。我的目标是一次打开一个图像并执行一组操作，一旦完成裁剪，客户端可以单击下一个按钮，并且该按钮图像应该刷新为下一个图像。

以下是来自控制器的“method1”sudo代码（controller.groovy）：

def method1(){
    render(view: 'app/crop_standalone' , model: 
           ["outputStreamList":stringList]);
 }

以下是“first.gsp”代码：

 <g:each in="${outputStreamList}" var="outputStream" status="i">
    <div id="standalone_crop">
        <img id="image" style="width: 500px;" src="data:image/jpeg;base64, ${outputStreamList.get(i)}"/>
        <td style="width: 10%">
        </td>
        <td style="width: 10%">
            <a href="javascript:void(0)" class="lnk button bg-blue LeftRotate"> LeftRotate</a>
        </td>
        <td style="width: 10%">
            <a class="lnk button bg-blue RightRotate">
                RightRotate
            </a>
        </td>
        <td style="width: 10%">
            <a class="lnk button bg-blue ZoomIn">
                ZoomIn
            </a>
        </td>

        <td style="width: 10%">
            <a class="lnk button bg-blue ZoomOut">
                ZoomOut
            </a>
        </td>
            <td style="width: 10%">
                <a class="lnk button bg-blue Next">
                    Next
                </a>
            </td>
    </div>

以下是.js

中点击功能的类定义

 function leftrotate() {
     $("#image").cropper("rotate",-15)
 }
 function rightrotate() {
     $("#image").cropper("rotate",15)
}
function ZoomIn() {
    $("#image").cropper("zoom",0.1)
}
function ZoomOut() {
    $("#image").cropper("zoom",-0.1)
}
$('.Crop').click( function(){
    var cropcanvas = $('#image').cropper('getCroppedCanvas');
    var croppng = cropcanvas.toDataURL("image/png");
    var cropObject = $(".Crop");
    var payload = cropObject.metadata();
    payload.croppedImg = croppng;
    $.ajax({
        url: '/csdb/application/saveCroppedPDF',
        type: 'GET',
        data: payload,
        contentType: "application/json",
        dataType: "json",
        success: function (response) {
            console.log(response);
            location.reload();
        }
        });

});
$('.LeftRotate').click( function() {
    leftrotate();
});
$('.RightRotate').click( function() {
    rightrotate();
});
$('.ZoomIn').click( function () {
    ZoomIn();
});
$('.ZoomOut').click( function(){
    ZoomOut();
});
$('.Next').click( function(){
    $("#standalone_crop").load('app/crop_standalone/');
});

我想在下一次点击时从列表中重新加载下一张图片。请让我知道正确的设计。它一次打印所有图像。

gsp：如何在按钮点击

0 个答案: