Question

我正在努力将Jcrop集成到我的网络应用中。 Jcrop有一个javascript函数，其内容使用用户上传的图片的尺寸，因此javascript是动态的。我对我可以采取的方法有一些模糊的想法，但不知道如何。

此场景中的事件序列如下：

用户选择要上传的图片
弹出窗口（即AJAX）使用户能够裁剪图片。这是通过使用Jcrop来完成的，这需要下面的javascript。

Javascript代码：

function initCropping(width, height, preview_width, preview_height) {
var jcrop = $.Jcrop('#cropbox', {
    onChange: showPreview,
    onSelect: showPreview,
    aspectRatio: 1,
    minSize: [preview_width, preview_height]
});

$('#crop').filter(':button').click( function () {
    var selection = jcrop.tellSelect();
    alert(selection.x + ', ' + selection.x2 + ', ' + selection.y + ', ' + selection.y2);
});

// Our simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
function showPreview(coords)
{
    if (parseInt(coords.w) > 0)
    {
        var rx = {{ preview_width }} / coords.w;
        var ry = {{ preview_height }} / coords.h;

        $('#preview').css({
            width: Math.round(rx * {{ width} }) + 'px',
            height: Math.round(ry * {{ height }}) + 'px',
            marginLeft: '-' + Math.round(rx * coords.x) + 'px',
            marginTop: '-' + Math.round(ry * coords.y) + 'px'
        });
    }
};
};

这里的问题是{{width}}和{{height}}是上传图片的尺寸，因此在步骤1之后无法确定它们，因此我将javascript称为动态。

我有一些模糊的想法是：

从我的网络服务器提供javascript
AJAXly将图片尺寸发送到客户端浏览器，并通过另一个javascript函数在客户端构建该动态javascript函数。
其他一些方法??

请分享您在这种情况下采取的方法，一个例子（一个例子会很棒）以及原因。感谢。

FYI。我正在使用Django和jQuery。

处理动态javascript的方法，其内容取决于用户输入

0 个答案: