想实现js获取图片1像素颜色来填充父级div背景。但function功能不会写,高手赐教
<head>
<style>
.wrap{
width:100%;
}
.aaa{
margin:0 auto;
display:block;
width:300px;
height:200px;
background-image:url(http://img.netbian.com/file/2018/0118/8d69998fb492dbf4cbddcbb531286a3b.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<a class="aaa" id="bgcolor"></a>
</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("bgcolor");
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
var colorData = canvas.getPixelColor(1, 1); // 获取x=1,y=1像素处的颜色
var color = colorData.rgba;
$("wrap").css("backgroundColor", color);
}
$(document).ready(function () {
//var img = new Image();
//img.src = document.getElementById('bgcolor').style.backgroundImage;
//$(img).load(function () {
//draw(img);
//});
});
</script>
</body>
$("wrap").css("backgroundColor", color);改成
$(".wrap").css("background-color", color);