How to resize canvas according to upload image in javascript?

Question

I have the following code:

<script type="text/javascript">
//start pdf to canvas

 ...

//end pdf to canvas
var a="123_m";
var imgname = "images/im/"+a+"/2";

var side = 1;
$(document).ready(function () {
    $("#ImageUpload").uploadify({
        'multi': false,
        'queueSizeLimit': 1,
        'fileSizeLimit': 0,
        'progressData': 'speed',
        'swf': 'upscripts/uploadify.swf',
        'width': 67,
        'height': 50,
        'folder': 'Uploads',
        'auto': true,
        'onUploadError': function (file, errorCode, errorMsg, errorString) {
        },
        'onUploadSuccess': function (file, response) {

            var a = file.name;
            var b = "asdfd";
            angular.element("#canvascontainer").scope().InsertImage(a);
        }
    });

    var canvasdiscription = [{ "objects": [], "background": "rgba(0, 0, 0, 0)", "backgroundImage": "pug.jpg", "backgroundImageOpacity": 1, "backgroundImageStretch": true}];
    canvasdiscription[0].objects.push({ "type": "leg-text", "left": 202, "top": 51, "width": 231, "height": 31.2, "fill": "#000000", "overlayFill": null, "stroke": null, "strokeWidth": 1, "strokeDashArray": null, "scaleX": 1.53, "scaleY": 1.53, "angle": 0, "flipX": false, "flipY": false, "opacity": 1, "selectable": true, "hasControls": true, "hasBorders": true, "hasRotatingPoint": true, "transparentCorners": true, "perPixelTargetFind": false, "text": "0001", "fontSize": 24, "fontWeight": 100, "fontFamily": "Arial", "fontStyle": "", "lineHeight": 1.3, "textDecoration": "", "textShadow": "", "textAlign": "left", "path": null, "strokeStyle": "", "backgroundColor": "", "useNative": true, "name": "text", "lockUniScaling": true, "config": { "feildId": "3", "feildName": "fldcname" }, "validations": { "maxwidth": 700, "maxheight": 400, "maxfont": 1000, "minfont": 0, "angle": 0 }, "controls": { "fontFamily": true, "fontSize": true, "boldFont": true, "normalFont": true, "italicFont": true, "colorFont": true, "groupOperations": true, "addToFront": true, "leftAlign": true, "rightAlign": true, "centerAlign": true, "underLine": true, "reAlign": true }, "originaltext": "0001", "meta": {} });
    alert(imgname);
    canvasdiscription[0].backgroundImage = imgname + "-2.jpg";
    alert(imgname + "-2.jpg");

    var canvasLimit = canvasdiscription.length;
    var canvasData = [];

    var jcrop_api;
    var bounds, boundx, boundy;
    var c = {};
    for (var i = 0; i < canvasdiscription.length; i++)
    {
        var canvas = {};
        canvas.json = canvasdiscription[i];
        alert(canvasdiscription.length);
        canvas.height = 559;
        canvas.width = 397;
        canvas.scaleFactorX = 1; // 0.75714285714286;
        canvas.scaleFactorY = 1; // 0.75714285714286;
        canvas.left = 10;
        canvas.top = 10;
        canvasData.push(canvas);
    }

    console.log(canvasData);

    Start(canvasLimit, canvasData);
    //Initially run the function:
    $(window).resize();
});
</script>

In this code, I'm uploading JPG image but the canvas size is fixed and I want to resize the canvas according to that uploaded image. It's not working properly when I resize the canvas to the image height and width. Please help me out with this. I hope you guys can solve this problem. Thanks!

Answer 1

I think I found a way to answer your question. As I mentioned in the comments, there are mistakes in the last loop, my code code seems to be agree with it:

<script type="text/javascript">
    var canvasdiscription = [{ "objects": [], "background": "rgba(0, 0, 0, 0)", "backgroundImage": "pug.jpg", "backgroundImageOpacity": 1, "backgroundImageStretch": true}];
    canvasdiscription[0].objects.push({ "type": "leg-text", "left": 202, "top": 51, "width": 231, "height": 31.2, "fill": "#000000", "overlayFill": null, "stroke": null, "strokeWidth": 1, "strokeDashArray": null, "scaleX": 1.53, "scaleY": 1.53, "angle": 0, "flipX": false, "flipY": false, "opacity": 1, "selectable": true, "hasControls": true, "hasBorders": true, "hasRotatingPoint": true, "transparentCorners": true, "perPixelTargetFind": false, "text": "0001", "fontSize": 24, "fontWeight": 100, "fontFamily": "Arial", "fontStyle": "", "lineHeight": 1.3, "textDecoration": "", "textShadow": "", "textAlign": "left", "path": null, "strokeStyle": "", "backgroundColor": "", "useNative": true, "name": "text", "lockUniScaling": true, "config": { "feildId": "3", "feildName": "fldcname" }, "validations": { "maxwidth": 700, "maxheight": 400, "maxfont": 1000, "minfont": 0, "angle": 0 }, "controls": { "fontFamily": true, "fontSize": true, "boldFont": true, "normalFont": true, "italicFont": true, "colorFont": true, "groupOperations": true, "addToFront": true, "leftAlign": true, "rightAlign": true, "centerAlign": true, "underLine": true, "reAlign": true }, "originaltext": "0001", "meta": {} });

    var canvasData = [];

    //Ilterate through the contained json objects in variable 'canvasdiscription'
    for (var i = 0; i < canvasdiscription.length; i++)
    {
        //Generate a plain Javascript object
        var objectProperties = eval(canvasdiscription[i]);

        //I suppose you want to take the background image as base for the new canvas size
        var imageDimensions = new Image()
        imageDimensions.src = canvasdiscription[i].backgroundImage;

        //Ilterate through the contained json objects in variable 'canvasdiscription.objects',
        //because the property 'objects' contains a list of data in json format
        for (var j = 0; j < objectProperties.objects.length; j++)
        {
            //In my example the following lines modifies the orginal values
            objectProperties.objects[j].height = imageDimensions.height;
            objectProperties.objects[j].width = imageDimensions.width; 
            objectProperties.objects[j].scaleFactorX = 1; // 0.75714285714286;
            objectProperties.objects[j].scaleFactorY = 1; // 0.75714285714286;
            objectProperties.objects[j].left = 10;
            objectProperties.objects[j].top = 10;

            //Store that current item into an array
            canvasData.push(objectProperties.objects[j]);
        }
    }

    //Example output
    console.log("height: " + canvasdiscription[0].objects[0].height);
    console.log("top: " + canvasdiscription[0].objects[0].top);
    console.log("scaleFactorX: " + canvasdiscription[0].objects[0].scaleFactorX);
</script>

Hopefully it works for you.