2

画像をキャンバスに変換する関数があります。関数内で作成したキャンバスをjqueryを使って関連する画像に置き換えようとしましたがうまくいき.replaceWith()ません。

JS:

    imgArray = $("img");
    for (var i = 0; i < imgArray.length; i++)
    {
        convertImageToCanvas(imgArray[i]);
    }

    function convertImageToCanvas(image) {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        canvas.getContext("2d").drawImage(image, 0, 0);
        image.replaceWith(canvas);
    }
4

2 に答える 2

1

画像に適用するjQueryの選択がありませんreplaceWith：

これを置き換えます：

image.replaceWith(canvas); // image here is a DOM object, not a jQuery one

これとともに：

$(image).replaceWith(canvas); // here we select the image with jQuery, making it a jQuery object

http://jsfiddle.net/GHKKq/

于 2013-02-16T15:44:52.047 に答える
1

前の質問の例ではそうではないと確信しています!

以下はあなたのデモに似ていますが、完全ではありません... http://jsfiddle.net/fsjv7/1/

HTML

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <canvas id="example" style="border: 1px solid black" height="10" width="10"></canvas>
    <br />
    Don't place img tags into your document. Place Empty Canvas Tags (with unique names)
  </body>
</html>

Javascript

// add items to this array to load more images into different canvas'
var resources = [ 
  { 
    "destination": "example", 
    "src": "https://developer.mozilla.org/samples/canvas-tutorial/images/rhino.jpg" 
  } 
];

var loadResources = function(obj) {
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      img = new Image();
      img.src = obj[key].src;
      img.onload = (function() {
      var o = obj[key].destination;
        return function() {
          canvas = document.getElementById(o);
          canvas.height = img.height;
          canvas.width = img.width;
          canvas.getContext("2d").drawImage(img, 0, 0);
        }
      })();
    }            
  }
}

window.onload = loadResources(resources);
于 2013-02-16T13:59:27.883 に答える