0

我有这个 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;
}
});
4

2 回答 2

1

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

在此处输入图像描述

您可以像这样获取已删除的 div 的背景图像 URL：

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>
于 2013-07-27T17:10:28.237 回答
1

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

如果图像是_<img><div>

见http://jsfiddle.net/alnitak/DuCVG/1/

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

于 2013-07-27T08:39:32.670 回答