-2

0_0.jpg、0_1.jpg、1_0.jpg などの画像のスライスがあります。1_1.jpg

それらを組み合わせて、1つの画像を形成したいと考えています。

すでにキャンバス要素があります。

どのライブラリ、またはアルゴリズムがこれを行うことができますか?

更新: 完全なシナリオ:

CANVAS 要素にいくつかの画像を読み込む必要があります。それらの一部は、スライスされていない完全な画像です。しかし、スライスされたものはほとんどありません。私が望むのは、これらのスライス画像を 1 つに結合することです。テーブルやcssなどを使用していると言う人もいます。ここではうまくいきません。それらをその場で変換するには、いくつかのテクニックが必要です。

4

2 に答える 2

1

キャンバスでこれを行うには、すべての寸法を把握し、Image オブジェクトを描画する必要があります。JS 画像オブジェクトを使用して、画像をプリロードします。そこから、幅、高さなど、それらを「縫い合わせる」ために必要なすべての情報が得られます...

http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

// Three arguments: the element, destination (x,y) coordinates.
context.drawImage(img_elem, dx, dy);

// Five arguments: the element, destination (x,y) coordinates, and destination 
// width and height (if you want to resize the source image).
context.drawImage(img_elem, dx, dy, dw, dh);

// Nine arguments: the element, source (x,y) coordinates, source width and 
// height (for cropping), destination (x,y) coordinates, and destination width 
// and height (resize).
context.drawImage(img_elem, sx, sy, sw, sh, dx, dy, dw, dh);

これは、あなたが望むものに近い例です:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }

      window.onload = function(images) {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        var sources = {
          darthVader: "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg",
          yoda: "http://www.html5canvastutorials.com/demos/assets/yoda.jpg"
        };

        loadImages(sources, function(images) {
          context.drawImage(images.darthVader, 100, 30, 200, 137);
          context.drawImage(images.yoda, 350, 55, 93, 104);
        });
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
  </body>
</html>

個人的には、パディングとマージンがゼロのテーブルを使用するだけです。はるかに簡単な IMO。

于 2012-07-16T10:36:49.497 に答える
0

についてはわかりませんが<canvas>、たくさんの を作成し、<img>それらが完全に収まるように配置するだけです。とは異なり、これは簡単で、すべてのブラウザーで機能します<canvas>。

于 2012-07-16T10:26:34.917 に答える