在畫布中繪制div元素

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背景圖像的圖像 - 沒有圖像元素 。

如果圖像是<div>的真實<img>標記，它確實有效

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

（更難）替代方法是使用window.getComputedStyle()從元素中讀取background-image CSS屬性，解析它，然后創建一個具有相同源的全新Image對象。

Answer 2

使用jQuery將div背景圖像繪制到html畫布上

在此輸入圖像描述

你可以得到一個丟棄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>

在畫布中繪制div元素

問題描述

2 個解決方案

解決方案1
1 2013-07-27 08:39:32

解決方案2
1 已采納 2013-07-27 17:10:28

在畫布中繪制div元素

問題描述

2 個解決方案

解決方案1 1 2013-07-27 08:39:32

解決方案2 1 已采納 2013-07-27 17:10:28

解決方案1
1 2013-07-27 08:39:32

解決方案2
1 已采納 2013-07-27 17:10:28