Combine images in canvas

Testing combining images in canvas

by Lore ZZ

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://rawgithub.com/mailru/FileAPI/master/dist/FileAPI.min.js"></script>
<div class="b-button js-fileapi-wrapper">
    <input type="file" id="files" name="files[]" multiple />
</div>
<p>
    <canvas id="canvasCombine"></canvas>
</p>
<br style="clear:both;" />
<p id="outputContainer" style="display:none;">
    <button id="getImg">Get Img</button>
    <br />
    <!--<span>The Get Img button won't work as long as the logo is loaded cross origin</span>--> <span>After clicking the Get Img button, a flattened version of the above image(s) will be created in an img element. Try right clicking on one and clicking "Open image in new tab"</span>

    <br /> <span id="imgOutput"></span>

</p>

CSS

.thumb {
      height: 175px;
      width: 175px;
      border: 1px solid #000;
      padding: 5px;
      margin: 0px 10px;
  }
  div.thumb {
      float: left;
  }
  canvas {
      border: 1px solid black;
}
  }

JavaScript

outputContainer = $("#outputContainer"); //cache the jquery reference
imgOutput = $("#imgOutput");
jCanvas = $("#canvasCombine");
canvas = jCanvas.get(0);
canvH = null;
canvW = null;
images = [];

function getCanvasContentVisible(){
    var len = images.length;
    var top, left, height, width;
    for (var i = 0; i < images.length; i++){
        var img = images[i];
        var imgBound = img.getBoundingRect();
        //if (top == null || img.getTop() < top){
        if (top == null || imgBound.top < top){
            //top = img.getTop();
            top = imgBound.top;
        }
        //if (left == null || img.getLeft() < left){
        if (left == null || imgBound.left < left){
            //left = img.getLeft();
            left = imgBound.left;
        }
        //if (height == null || img.getTop() + img.getHeight() > height){
        //if (height == null || img.getTop() + img.getBoundingRectHeight()  > height){
        if (height == null || imgBound.top + imgBound.height  > height){
            //height = img.getTop() + img.getHeight();
            //height = img.getTop() + img.getBoundingRectHeight();
            height = imgBound.top + imgBound.height;
        }
        //if (width == null || img.getWidth() > width){
        //if (width == null || img.getBoundingRectWidth() > width){
        if (width == null || imgBound.width  > width){
            //width = img.getWidth();
            //width = img.getBoundingRectWidth();
            width = imgBound.width;
        }
    }
    //now that we have our bounding box, shift things to be centered and such
    height -= top;
    canvH = height;
    canvW = width;    
    fCanv.setWidth(width).setHeight(height);
    var len = images.length;
    for (var i = 0; i < len; i++){
        var image = images[i];
        var imgTop = image.getTop() - top;
        image.centerH().setTop(imgTop).setCoords();
    }
    top = 0;
    left = 0;
    return {top: top, left: left, height: height, width: width};
}

fCanv =...