如何根据javascript中的上载图像调整画布大小？

我有以下代码：

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

---

在这段代码中，我正在上传JPG图像，但画布大小是固定的，我想根据上传的图像调整画布的大小。当我将画布调整为图像高度和宽度时，它无法正常工作。请帮我解决这个问题。我希望你们能解决这个问题。谢谢

我想我找到了回答你问题的方法。正如我在评论中提到的，在最后一个循环中有错误，我的代码似乎同意这一点：

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

---

希望它对您有用。

您忘了使用menthion，即angular.js。但是，您是否尝试过读取图像的维度并在运行时修改画布对象？是的，我在onload中获得图像维度，但如果我设置为canvas，它将不起作用。我正在读取图像的维度，但如果我修改了画布对象，它将不起作用。您能提供一个关于jsfiddle.net的完整示例吗？我想您会怎么做，你应该检查你的代码。尤其是最后一个for循环中的代码似乎是错误的。而且我认为你不用“画布”。搜索画布元素。我相信你会找到它的描述。什么不起作用？你的源代码看起来怎么样？画布没有上传，图像宽度和高度没有出现。实际上，功能是我想上传画布中的图像，画布中有可拖动和可调整大小的文本，画布应该根据图像大小调整大小。请更新你的JSFIDLE示例，以便此处的用户可以确定确切的问题和HTML仅Javascript我使用AngularJSON和所有