问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js如何自动获取指定像素的颜色

头像
wjnds
    18123246

    以下代码为鼠标点击某点获取颜色，如何改为自动获取像素为X,Y=1,1的颜色？

    <head>
<style>
body {
    text-align:center;
}
.info {
    text-align:center;
    font-size:36px;
    line-height:36px;
}
#cursor{
    position:absolute;
    display:none;
    height:11px;
    width:11px;
    background:url(images/cursor.png);
}
</style>
</head>

<body>
<canvas id="canvas" width="400px" height="286px">Sorry, your browser dose not support canvas.</canvas>
<hr />
<div class="info" id="currentColor">点击上面的canvas来查看效果</div>
<div id="cursor"></div>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://www.jq22.com/demo/getcanvaspixelcolor20151227/getcanvaspixelcolor.js" type="text/javascript"></script>
<script type="text/javascript">
var draw = function(img) {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.shadowBlur = 20;
    context.shadowColor = "#000000";
    context.drawImage(img, 0, 0);

    canvas = $("#canvas");
    canvas.click(function (e) {
        var canvasOffset = canvas.offset();
        var canvasX = Math.floor(e.pageX - canvasOffset.left);
        var canvasY = Math.floor(e.pageY - canvasOffset.top);
        var colorData = document.getElementById("canvas").getPixelColor(canvasX, canvasY);
        // 获取该点像素的数据
        console.log(colorData);
        var color = colorData.rgba;
        $("body").css("backgroundColor", color);
        $("#currentColor").html("当前像素(" + canvasX + "," + canvasY + ")颜色为: " + color);
        var cursorX = (e.pageX - 5) + "px";
        var cursorY = (e.pageY - 5) + "px";
        $("#cursor").stop(true, true).css({
            "display" : "inline-block",
            "left" : cursorX,
            "top" : cursorY
        }).fadeOut(2500);
    });
}
$(document).ready(function () {
    var img = new Image();
    img.src = "images/demo.jpg";
    $(img).load(function () {
        draw(img);
    });
});
</script>
</body>
    javascripthtml5css
    阅读 8.9k
    1 个回答
    得票最新
    头像
    luckness
      6.2k2216
      ✓ 已被采纳
      var draw = function(img) {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.shadowBlur = 20;
    context.shadowColor = "#000000";
    context.drawImage(img, 0, 0);

    var colorData = canvas.getPixelColor(1, 1); // 获取x=1,y=1像素处的颜色
    var color = colorData.rgba;
    $("body").css("backgroundColor", color);
    $("#currentColor").html("当前像素(1, 1)颜色为: " + color);
}
$(document).ready(function () {
    var img = new Image();
    img.src = "images/demo.jpg";
    $(img).load(function () {
        draw(img);
    });
});
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题