1

我有一些代码可以在 Facebook 画布中使用 JCrop，并将其剥离到最低限度以调试问题。代码在这里的 JS Fiddle 中，但我也将它内联在下面。您会看到在该小提琴中拖动裁剪选择框很流畅。但是，当我将相同的代码放入 Facebook 画布时，拖动选择时图像会晃动非常小。这几乎就像某物正在被某物自动调整。仅供参考 - 我什至没有在我的画布代码中加载 Facebook JS SDK。画布中的代码与小提琴及下面的代码完全相同：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css" media="screen">
        /* jquery.Jcrop.min.css v0.9.10 (build:20120429) */
        .jcrop-holder{direction:ltr;text-align:left;}
        .jcrop-vline,.jcrop-hline{background:#FFF url('https://raw.github.com/tapmodo/Jcrop/master/css/Jcrop.gif') top left repeat;font-size:0;position:absolute;}
         .jcrop-vline{height:100%;width:1px!important;}
        .jcrop-hline{height:1px!important;width:100%;}
        .jcrop-vline.right{right:0;}
        .jcrop-hline.bottom{bottom:0;}
        .jcrop-handle{background-color:#333;border:1px #eee solid;font-size:1px;}
        .jcrop-tracker{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;height:100%;width:100%;}
        .jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0;}
        .jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px;}
        .jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%;}
        .jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%;}
        .jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0;}
        .jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0;}
        .jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0;}
        .jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px;}
        .jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%;}
        .jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px;}
        .jcrop-dragbar.ord-n{margin-top:-4px;}
        .jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px;}
        .jcrop-dragbar.ord-e{margin-right:-4px;right:0;}
        .jcrop-dragbar.ord-w{margin-left:-4px;}
        .jcrop-light .jcrop-vline,.jcrop-light .jcrop-hline{background:#FFF;filter:Alpha(opacity=70)!important;opacity:.70!important;}
        .jcrop-light .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#000;border-color:#FFF;border-radius:3px;}
        .jcrop-dark .jcrop-vline,.jcrop-dark .jcrop-hline{background:#000;filter:Alpha(opacity=70)!important;opacity:.7!important;}
        .jcrop-dark .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#FFF;border-color:#000;border-radius:3px;}
        .jcrop-holder img,img.jcrop-preview{max-width:none;} 
    </style>
    <script type="text/javascript" charset="utf-8" src="https://raw.github.com/tapmodo/Jcrop/master/js/jquery.Jcrop.min.js"></script>

    <script type="text/javascript" charset="utf-8">
        function doit(){
            var imgWidth = 640;
            var imgHeight = 640;
            var cropWidth = 150;
            var cropHeight = 150;
            var cropX = (imgWidth-cropWidth)/2;
            var cropY = (imgHeight-cropHeight)/2;

            var opt = {};
            opt.allowSelect = false;
             var jCropApi = $.Jcrop('#crop_this', opt);
            jCropApi.animateTo([cropX,cropY,cropX+cropWidth,cropY+cropHeight]);
        }

        window.onload = doit;
    </script>
</head>
<body> 
    <img id="crop_this" src="http://sphotos-a.xx.fbcdn.net/hphotos-prn1/522265_10101329774882328_647210628_n.jpg" />        
</body>
</html>​

更新 虽然我还没有 100% 验证这一点，但我怀疑它与自动宽度边距有关，以便水平居中。插件imgareaselect有这个问题，我已经验证过了。

4

0 回答 0