代码之家 › 专栏 › 技术社区 › Jason Evans

使用jQuery在图像上绘制点

drawing image jquery

Jason Evans · 技术社区 · 14 年前

 <img src="images/test.jpg" id="testimg" />

    <script type="text/javascript">
        $("#testimg").click(function (ev) {
            mouseX = ev.pageX;
            mouseY = ev.pageY
            alert(mouseX + ' ' + mouseY);
        })

    </script>

我想做的是,当用户点击图像时,我想在点击的X,Y坐标处画一个点。

有人能给我一些建议吗?

2 回复 | 直到 9 年前

hacksteak25 14 年前

<script type="text/javascript">
        $("#testimg").click(function (ev) {
        mouseX = ev.pageX;
        mouseY = ev.pageY
        //alert(mouseX + ' ' + mouseY);
        var color = '#000000';
        var size = '1px';
        $("body").append(
            $('<div></div>')
                .css('position', 'absolute')
                .css('top', mouseY + 'px')
                .css('left', mouseX + 'px')
                .css('width', size)
                .css('height', size)
                .css('background-color', color)
        );
    })
</script>

这将绘制一个黑色1x1像素div。

Kasturi 14 年前

方法1。

你必须利用画布标签。 https://developer.mozilla.org/en/Canvas_tutorial

方法2。

<div style="width:1px; height : 1px; position: fixed; top: mouseY; left:mouseX></div>

仅当页面不可滚动时工作

推荐文章

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

McRui · Laravel storeAs()存储问题中的图像

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

GabyUnalaq · 从原始RGB深度图像到灰度的转换不正确

2 年前

AayushPokharel · 如何在css中处理图像的alpha层?

2 年前

MHSarmadi · 阻止显示未完全加载的图像

2 年前

softandwet · 反应img onError未点火

2 年前

Nilesh soni · 颤振图像已缩放,但如何更改缩放位置

2 年前

Adheed nihal · 如果在jquery中超过了文件限制,如何清除用户上传的图像

2 年前

imcoding · img src属性上的vuejs数据绑定出现404错误

2 年前