开发者

Ways to deal with dynamic javascript whose content depends on user inputs

开发者 https://www.devze.com 2023-03-13 12:27 出处:网络
I am working on integrating Jcrop into my web app. Jcrop has a javascript function whose content uses the dimensions of the picture uploaded by user and thus the javascript is dynamic. Ihave some vagu

I am working on integrating Jcrop into my web app. Jcrop has a javascript function whose content uses the dimensions of the picture uploaded by user and thus the javascript is dynamic. I have some vague idea on the approaches that I can take but not knowing how.

The sequence of events in this scenario goes like this:

  1. User chooses a picture to upload
  2. A popup shows up (ie. AJAX) to give the user the ability to crop the picture. This is done by the use of Jcrop, which requires开发者_Go百科 the javascript below.

Javascript code:

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'
        });
    }
};
};

The problem here is that {{ width }} and {{ height }} are the dimensions of the uploaded picture, so they can't be determined until after Step 1 and thus I call the javascript dynamic.

The approaches that I have vague idea are:

  1. Serve that javascript from my web server
  2. AJAXly send the picture dimensions to the client browser and build that dynamic javascript function at the client end by another javascript function.
  3. Some other approaches??

Please share the approach that you would take in this scenario, how (an example would be great), and why. Thanks.

FYI. I am using Django and jQuery.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号