locked
Picture puzzle image size

    General discussion

  • Hi

    I`m building a picture puzzle and I`m having size problems. My app has a setting of puzzle size (3*3 - 8*8).

    I`m trying to set a fixed size and can`t get it. The image can come from different sources (like webcam or file) so the image size is unknown.

    The image object is build using JavaScript so I tried using both "var img = new Image();" and "var img = document.getElementById('tempImg');"

    None of these worked.

    The image is being divided using canvas in javascript.

    I want my picture puzzle board always to be of fixed size of 900px no matter what the image size is and no matter how many pieces the puzzle is divided.

    Here are parts of my code:

        // this will start the game with an initial image
        function firstGameInitialize() {
            num = [];
            image = new Image();
            image.onload = cutImageUp;
            image.src = '/images/beach.jpg';
            initializeGame();
        }

     

        // create an img tag element
        function createCell(grid, x, y, counter) {
            var innerImg = new Image();
            innerImg.className = 'cell';
            innerImg.style.msGridColumn = x;
            innerImg.style.msGridRow = y;
            innerImg.style.visibility = 'visible';
            innerImg.id = 'myImageElementInTheDom' + counter;
            innerImg.addEventListener('click', handleMove);
            grid.appendChild(innerImg);
        }
        // this will cut the image to pieces according to the image size and puzzle size
        function cutImageUp() {
            var solutionImage = document.getElementById('originalImage');
            solutionImage.src = image.src;
            widthOfOnePiece = image.width / puzzleSize;
            heightOfOnePiece = image.height / puzzleSize;
    
            var counter = 1;
            var imagePieces = [];
            for (var x = 0; x < puzzleSize; ++x) {
                for (var y = 0; y < puzzleSize; ++y) {
                    var canvas = createCanvas();
                    var context = canvas.getContext('2d');
                    context.drawImage(image, x * widthOfOnePiece, y * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height);
                    var data = canvas.toDataURL();
                    var pi = new pieceInfo();
                    pi.id = counter;
                    pi.data = data;
                    imagePieces.push(pi);
                    counter++;
                    // imagePieces now contains data urls of all the pieces of the image
                }
            }
    
            setPuzzleImages(imagePieces);
            scramblePuzzle(imagePieces);
        }
    
        // a generic function to create canvas
        function createCanvas() {
            var canvas = document.createElement('canvas');
            canvas.width = widthOfOnePiece;
            canvas.height = heightOfOnePiece;
    
            return canvas;
        }

        // this function will scramble the puzzle
        function setPuzzleImages(imagePieces) {
            for (var index = 1; index <= puzzleSize * puzzleSize; index++) {
                var imgId = 'myImageElementInTheDom' + index.toString();
                var anImageElement = document.getElementById(imgId);
                if ((index - 1) == puzzleSize * puzzleSize - 1) {
                    var canvas = createCanvas();
                    anImageElement.alt = -1;
                    anImageElement.src = canvas.toDataURL();
                    emptyCell.id = anImageElement.id;
                    emptyCell.row = anImageElement.style.msGridRow;
                    emptyCell.col = anImageElement.style.msGridColumn;
                }
                else {
                    anImageElement.alt = imagePieces[index - 1].id;
                    anImageElement.src = imagePieces[index - 1].data;
                }
            }
        }
    <div id="mainGrid">
    </div>
    <img id="imgTemp" src="#" style="width: 900px; " />

    Hope any one can help me.
    Thanks :(

     

     

     

    • Changed type Dino He Tuesday, August 14, 2012 3:41 PM not a win8 UI specific question
    Sunday, August 12, 2012 12:25 PM

All replies

  • This is a lot of code so not sure what you are trying to do but when you receive the original image set it in a temp image element that is hidden. Then you can do something as simple as imgElement.width = 900 or imgElement.height = 900 depending on which side is larger. Then you are guaranteed that the image will have width & height <= 900. From there you can build a canvas with the contents of that image element. 
    Tuesday, August 14, 2012 10:44 PM
  • Thanks - Only got to this reply now - I`ll try this on Sunday :)
    Thursday, August 16, 2012 5:29 PM
  • Thanks :)

    I did something similar only on a single piece and on the css style (and the style part was the missing part).

    Now it`s working :)

    Tuesday, August 21, 2012 5:19 AM