HTML画布动态图像宽度和高度

Question

我正在尝试创建多个画布并在每个画布中放置图像数组。请纠正我错在哪里。以下是我的代码。

var mywidth, myheight;
$(function(){
    var Images = ['1.jpg','2.jpg','3.jpg','4.png','5.jpg']
    var imageLength = Images.length;


    function doit(){
        var image = new Image();
        var canvas = document.getElementById("div"+i).getContext("2d");
        image.onload = function divId() {
            // Done loading, now we can use the image
            canvas.drawImage(image, 0, 0, mywidth, myheight);
        };
        image.src = Images[i];
    }

    for(i=0;i<imageLength;i++){
        var img = new Image();
        img.src = Images[i];
        mywidth = (img.width/3);
        myheight = (img.height/3);
        console.log(mywidth + ' x ' + myheight);
        $('.result').append('<canvas id="div'+i+'" width="'+mywidth+'" height="'+myheight+'"></canvas>');
        doit();
    }
});

网格生成但图像不按照画布大小进行淀粉处理。 画布宽度和高度是其图像的33.336％。请帮助。

Answer 1

需要在图片加载后创建画布。

var mywidth, myheight;
$(function(){
    var Images = ['1.jpg','2.jpg','3.jpg','4.png','5.jpg']
    var imageLength = Images.length;


    function doit(i){
        var image = new Image();

        image.onload = function() {
            mywidth = (image.width/3);
            myheight = (image.height/3);
            console.log(mywidth + ' x ' + myheight);
            $('.result').append('<canvas id="div'+i+'" width="'+mywidth+'" height="'+myheight+'"></canvas>');
            var canvas = document.getElementById("div"+i).getContext("2d");
            canvas.drawImage(image, 0, 0, mywidth, myheight);
        };
        image.src = Images[i];
    }

    for(i=0;i<imageLength;i++){
        doit(i);
    }
});

Answer 2

这是它的样子。每张照片都有自己的宽度和高度。 我正在做.grid = 100％，grid-item = 100.3％的33.33％。 让我们说第一个grid-item = 400px然后画布宽度=第一个网格的100％。 现在将图像放到画布1，宽度将为400px 希望你理解我的观点