-2

我有图像切片，例如 0_0.jpg、0_1.jpg、1_0.jpg。1_1.jpg

我想将它们组合成一个图像。

我已经有一个画布元素。

什么库或算法可以做到这一点？

更新：完整的场景：

我必须将一些图像加载到 CANVAS 元素中。其中一些是完整的图像，而不是切片。但很少被切成碎片。我想要的是将这些切片图像组合成一个。有人说使用 table 或 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>

就个人而言，我会简单地使用一个零填充和零边距的表格。国际海事组织容易得多。

于 2012-07-16T10:36:49.497 回答
0

我不知道<canvas>，但我只是创建一堆<img>s 并将它们绝对定位，以便它们组合在一起。这将很简单，并且适用于所有浏览器，不像<canvas>.

于 2012-07-16T10:26:34.917 回答