Question

我有一些图片，比如0_0.jpg，0_1.jpg，1_0.jpg。 1_1.jpg

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

我已经有了一个canvas元素。

哪个库或算法可以做到这一点？

更新：完成Senario：

我必须将少量图像加载到CANVAS元素中。它们的全部是完整的图像，而不是切片。但很少有人切成碎片。我想要的是将这些切片图像合二为一。 有些人说使用表或css或其他什么。这不会在这里工作。我需要一些技术来快速转换它们。

Answer 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。

Answer 2

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

Javascript算法结合图像切片形成单个图像

2 个答案: