javascript - jquery 中的 ImgAreaSelect

标签 javascript jquery img-area-select-jquery

我是 jquery 新手。我在 jquery 中的任务是“ImgAreaSelect” 我从早上就开始尝试,但没有实现目标。请查看我的代码:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>
<script>
    $(document).ready(function () {
    $('#ladybug_ant').imgAreaSelect({
        handles: true,
        onSelectEnd: function(img, selection){
            if (!selection.width || !selection.height){
                return;
            }
            $('#x1').val(selection.x1);
            $('#y1').val(selection.y1);
            $('#x2').val(selection.x2);
            $('#y2').val(selection.y2);
            $('#w').val(selection.width);
            $('#h').val(selection.height); 
        }
    });
});

    </script>
</head>
<body>
   <img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" id="ladybug_ant">
</body>
</html>

最佳答案

您似乎缺少必须从 http://odyniec.net/projects/imgareaselect/ 下载的插件本身

jQuery 只是核心,不包含图像区域选择方法

加载插件后,您将能够使用 $('#ladybug_ant').imgAreaSelect({ .. });

这是一个示例 http://jsfiddle.net/8TwRJ/

关于javascript - jquery 中的 ImgAreaSelect,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20538876/

相关文章:

javascript - 由于 ng-disabled 不起作用,将 anchor 标记重构为按钮

javascript - 使用 JavaScript 根据 JSON 文件开头的内容读取该行

javascript - Jquery 选择更改时选择的选项

javascript - knockoutjs 自定义元素(组件),viewmodel 属性未定义

asp.net - 不显眼的 Javascript 富文本编辑器?

javascript - jQuery slideUp/slideDown 没有动画

javascript - JS 中对象数组按两个值排序

javascript - jquery imgAreaSelect 在 Bootstrap 模式窗口中不起作用

php - jQuery imgAreaSelect 创建缩略图