Question

如何在画布上上传多个图像有一个单独的图层，并调整所有图层的大小。在此代码中只上传了一张无法调整大小的图片。但是需要上传多个图像并调整画布中所有图像的大小

$(document).ready(function(e) {

    var imageLoader = document.getElementById('imageLoader');
        imageLoader.addEventListener('change', handleImage, false);
    var canvas = document.getElementById('Layer_1');
    var ctx = canvas.getContext('2d');

    function handleImage(e){
        var reader = new FileReader();
        reader.onload = function(event){
            var img = new Image();
            img.onload = function(){
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img,0,0);
            }
            img.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);     
    }

}); 




<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>

<div id="holder">
    <canvas id="Layer_1"></canvas>
</div>

Answer 1

在html输入元素中指定multiple，以便用户可以选择多个文件。

然后在你的handleImage中你可以循环遍历多个e.target.files而不只是一个[0]。

至于调整大小，您可以使用drawImage的扩展版本：

// resize the original image as desired and draw it at [x,y]

ctx.drawImage(img,0,0,img.width,img.height,x,y,desiredWidth,desiredHeight);

如何在画布中上传多个图像并调整大小

1 个答案: