Question

我有这个jsfiddle： http://jsfiddle.net/VFZ4m/11/

当用户删除div时，应该在画布中创建并绘制相同的图像，我该怎么做？

我尝试了这段代码，但它无法正常运行

$('#x').draggable();
$('#c').droppable({
drop: function(event, ui) {
    var img = ui.draggable;
    var ctxt =$("#c")[0].getContext("2d");
    ctxt.drawImage(img[0], 0, 0);
    return false;
}
});

Answer 1

您无法访问存储为CSS背景图像的图像 - 没有图像元素。

如果图片是<img>

中的真实<div>标记，则可以正常工作

请参阅http://jsfiddle.net/alnitak/DuCVG/1/

（更难）替代方法是使用window.getComputedStyle()从元素中读取background-image CSS属性，解析它，然后创建一个全新的Image对象，相同的来源。

Answer 2

使用jQuery在div画布上绘制div背景图像

enter image description here

你可以得到一个删除div的背景图片网址，如下所示：

var img = ui.draggable;
var bkURL=img.css("background-image");
bkURL=bkURL.substr(5).substr(0,bkURL.length-7);

然后，您只需使用该URL作为其.src：

来新建一个图像元素

var img=new Image();
img.onload=function(){
    ctxt.drawImage(img, 0, 0);
}
img.src=bkURL

这是代码和小提琴：http://jsfiddle.net/m1erickson/WzHvJ/

<!doctype html>
<html lang="en">
<head>

<style>
    body {
    padding: 20px;    
    }
    #x {
    border: 1px solid green;
        cursor: move;
        background:url('http://www.kidzui.com/images/layout/spaceship/star-orange-full.png') no-repeat;
        height:40px; 
        width:40px;
    }
    #x, #c {
    display: block;
    clear: both;
    }
    #c {
    margin-top: 30px;
    border: 1px solid red
    }
</style>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <script>

  $(function() {

      $('#x').draggable();
      $('#c').droppable({
          drop: function(event, ui) {
              var img = ui.draggable;
              var bkURL=img.css("background-image");
              bkURL=bkURL.substr(5).substr(0,bkURL.length-7);
              var ctxt =$("#c")[0].getContext("2d");
              var img=new Image();
              img.onload=function(){
                  ctxt.drawImage(img, 0, 0);
              }
              img.src=bkURL
              return false;
          }
      });

  });   // end $(function(){});

  </script>
</head>
<body>
    <div id="x">&nbsp;</div>
    <canvas id="c" width="200" height="200">
</body>
</html>

在画布中绘制div元素

2 个答案: