Javascript算法将图像切片组合成单个图像答案

【问题标题】：Javascript Algorithm to combine slices of images to form single imageJavascript算法将图像切片组合成单个图像
【发布时间】：2012-07-16 10:23:58
【问题描述】：

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

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

我已经有一个画布元素。

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

更新：完整的场景：

我必须将一些图像加载到 CANVAS 元素中。其中一些是完整的图像，而不是切片。但很少被切成碎片。我想要的是将这些切片图像组合成一个。 有些人说使用 table 或 css 或其他什么。这在这里行不通。我需要一些技术来即时转换它们。

【问题讨论】：

为什么您认为需要在绘制之前将它们组合起来？
我想，如果我在绘制之前不将它们组合起来，那么我需要它们在画布中完美地修复。这里的问题是，用户可以放大和缩小画布元素（组合图像）。这是可以做到的吗？
不，你可以在画布的任何地方绘制它们，即使只有部分可见。你觉得你的变焦效果如何？
这段代码有什么问题？
请向我们展示您的缩放查看器的代码（在您的问题中），我们将向您展示如何集成切片图像。

标签： javascript algorithm canvas

【解决方案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。

【讨论】：

我不能在这里使用表格。因为我必须在画布中显示此图像。并且必须在显示之前从切片中制作完整的图像。有可能吗？
@SwatiSharma - 此答案中已经存在执行此操作的语法。你还需要什么？
这会即时转换图像吗？另外，我不确定如何控制坐标。没有坐标可以吗？因为有多个图像，对于一些我有 4 个切片，对于一些我有 6 个切片..等等什么是最好的方法？
Vilx，它也可以保存到 javascript 变量吗？像 var test = context.drawImage(img_ele,x,y);
@SwatiSharma - 我在我的答案中添加了一个链接，告诉您如何使用 JS Image 对象预加载图像。该对象应为您提供入门所需的所有信息。

【解决方案2】：

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

【讨论】：

我已经有了一个画布元素。我必须在该画布上显示多个图像，有些图像不需要组合，因为它们是一个。但是有些是切片，因此想将它们组合成一个。而且我必须在飞行中进行.. 可能是如果我可以获得一些登录来组合，然后我可以将其转换为数据/图像字符串？