实现js获取图片1像素颜色来填充父级div背景

想实现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>
阅读 5k
1 个回答

$("wrap").css("backgroundColor", color);改成
$(".wrap").css("background-color", color);

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题