Javascript 多个图像上载和画布上的图像预览

我已经为图片创建了一个上传，并将图片放到画布上。现在我想修改多个上传图像的脚本，下面是我的修改脚本：

JS:

$（函数（）{
$（“#文件输入”）。在（'change'，函数（e）上{
console.log（e.target.files[0]）；
如果（！e.target.files.length | |！window.FileReader）{
返回false；
}否则{
var countedfiles=$（“#缩略图画布[data other=“fileCanvas”]”）。长度；//检查文件画布的长度
for（var i=0；i0）{
var numb=countedfiles+1；
}否则{
var-numb=i；
}
log（e.target.files[i]）；
var file=e.target.files[i]；
var reader=new FileReader（）；
reader.onload=fileOnload（numb，e）；
reader.readAsDataURL（文件）；
}
}
});
函数fileOnload（numb，e）{
变量$img=$（''；
$（“#缩略图”）.append（newCanvas）；
var canvas=$（'#canvas-'+numb）[0]；
var context=canvas.getContext（'2d'）；
$img.load（函数（）{
var maxWidth=120；//图像的最大宽度
var maxHeight=120；//图像的最大高度
var ratio=0；//用于纵横比
var width=this.width；//当前图像宽度
var height=this.height；//当前图像高度
//检查当前宽度是否大于最大值
如果（宽度>最大宽度）{
ratio=maxWidth/width；//获取缩放图像的比率
this.width=maxWidth；//设置新宽度
this.height=高度*比率；//基于比率缩放高度
高度=高度*比率；//重置高度以匹配缩放图像
}
var width=this.width；//当前图像宽度
var height=this.height；//当前图像高度
//检查当前高度是否大于最大值
如果（高度>最大高度）{
ratio=maxHeight/height；//获取缩放图像的比率
this.height=maxHeight；//设置新高度
this.width=width*ratio；//基于比率的缩放宽度
宽度=宽度*比率；//重置宽度以匹配缩放图像
}
var newWidth=this.width；
var newHeight=this.height；
drawImage（this，0，0，newWidth，newHeight）；
});
}
});

但是

e.target.result

未定义

好的，我已经解决了

e.target.result

未定义，因为

e

将从父函数获得回调。因此我将定义变量

$img

如下所示：

$('#file-input').on('change', function (evt) {
 // other stuff here.....

  reader.onload = function(e) { 
   var $img = $('<img>', {
    src: e.target.result
   });
  fileOnload(numb, $img);
  }

});

$（'#文件输入'）。关于（'change'，函数（evt）{
//这里的其他东西。。。。。
reader.onload=函数（e）{
变量$img=$（'

对于effisien，如果可能的话，循环非常大，所以我定义每个迭代，而不是使用匿名函数

$(function () {
  $('#file-input').on('change', function (evt) {

    if (!this.files.length || !window.FileReader) {
        return false;
    } else {
        var countedfiles = $('#thumbnails canvas[data-other="fileCanvas"]').length; // check lenght of file canvas
        console.log(countedfiles);
        for (var i = 0; i < this.files.length; i++) {
            if (countedfiles > 0) {
                var numb = countedfiles;
            } else {
                var numb = i;
            }
            setup_reader(numb, this.files[i]);
        }
    }

});

function setup_reader(numb, file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) { 
        var $img = $('<img>', {
            src: e.target.result
        });
        fileOnload(numb, $img);
    }
}

function fileOnload(numb, $img) {

    var newCanvas = '<canvas class="canvas" width="120px" height="120px" data-other="fileCanvas" id="canvas-' + numb + '"></canvas>';
    $('#thumbnails').append(newCanvas);
    var canvas = $('#canvas-' + numb)[0];

    var context = canvas.getContext('2d');

    $img.load(function () {
        var maxWidth = 120; // Max width for the image
        var maxHeight = 120; // Max height for the image
        var ratio = 0; // Used for aspect ratio
        var width = this.width; // Current image width
        var height = this.height; // Current image height


        // Check if the current width is larger than the max
        if (width > maxWidth) {
            ratio = maxWidth / width; // get ratio for scaling image
            this.width = maxWidth; // Set new width
            this.height = height * ratio; // Scale height based on ratio
            height = height * ratio; // Reset height to match scaled image
        }

        var width = this.width; // Current image width
        var height = this.height; // Current image height

        // Check if current height is larger than max
        if (height > maxHeight) {
            ratio = maxHeight / height; // get ratio for scaling image
            this.height = maxHeight; // Set new height
            this.width = width * ratio; // Scale width based on ratio
            width = width * ratio; // Reset width to match scaled image
        }
        var newWidth = this.width;
        var newHeight = this.height;
        context.drawImage(this, 0, 0, newWidth, newHeight);
    });

  }
});

$（函数（）{
$（“#文件输入”）。在（'change'，函数（evt）上{
如果（！this.files.length | |！window.FileReader）{
返回false；
}否则{
var countedfiles=$（“#缩略图画布[data other=“fileCanvas”]”）。长度；//检查文件画布的长度
console.log（countedfiles）；
对于（var i=0；i0）{
var numb=countedfiles；
}否则{
var-numb=i；
}
设置读取器（numb，this.files[i]）；
}
}
});
功能设置\u读取器（编号，文件）{
var reader=new FileReader（）；
reader.readAsDataURL（文件）；
reader.onload=函数（e）{
变量$img=$（''；
$（“#缩略图”）.append（newCanvas）；
var canvas=$（'#canvas-'+numb）[0]；
var context=canvas.getContext（'2d'）；
$img.load（函数（）{
var maxWidth=120；//图像的最大宽度
var maxHeight=120；//图像的最大高度
var ratio=0；//用于纵横比
var width=this.width；//当前图像宽度
var height=this.height；//当前图像高度
//检查当前宽度是否大于最大值
如果（宽度>最大宽度）{
ratio=maxWidth/width；//获取缩放图像的比率
this.width=maxWidth；//设置新宽度
this.height=高度*比率；//基于比率缩放高度
高度=高度*比率；//重置高度以匹配缩放图像
}
var width=this.width；//当前图像宽度
var height=this.height；//当前图像高度
//检查当前高度是否大于最大值
如果（高度>最大高度）{
ratio=maxHeight/height；//获取缩放图像的比率
this.height=maxHeight；//设置新高度
this.width=width*ratio；//基于比率的缩放宽度
宽度=宽度*比率；//重置宽度以匹配缩放图像
}
var newWidth=this.width；
var newHeight=this.height；
drawImage（this，0，0，newWidth，newHeight）；
});
}
});

---

您可以使用fabric js。您可以在画布上上载多个图像

var canvas=newfabric.canvas（'canvas'）；
document.getElementById（'file'）.addEventListener（“更改”，函数（e）{
var file=e.target.files[0]；
var reader=new FileReader（）；
reader.onload=函数（f）{
var数据=f.target.result；
fabric.Image.fromURL（数据、函数（img））{
var oImg=img.set（{左：0，上：0，角：00，宽：100，高：100}）。比例（0.9）；
canvas.add（oImg.renderAll（）；
var a=canvas.setActiveObject（oImg）；
var dataURL=canvas.toDataURL（{格式：'png'，质量：0.8}）；
});
};
$(function () {
  $('#file-input').on('change', function (evt) {

    if (!this.files.length || !window.FileReader) {
        return false;
    } else {
        var countedfiles = $('#thumbnails canvas[data-other="fileCanvas"]').length; // check lenght of file canvas
        console.log(countedfiles);
        for (var i = 0; i < this.files.length; i++) {
            if (countedfiles > 0) {
                var numb = countedfiles;
            } else {
                var numb = i;
            }
            setup_reader(numb, this.files[i]);
        }
    }

});

function setup_reader(numb, file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) { 
        var $img = $('<img>', {
            src: e.target.result
        });
        fileOnload(numb, $img);
    }
}

function fileOnload(numb, $img) {

    var newCanvas = '<canvas class="canvas" width="120px" height="120px" data-other="fileCanvas" id="canvas-' + numb + '"></canvas>';
    $('#thumbnails').append(newCanvas);
    var canvas = $('#canvas-' + numb)[0];

    var context = canvas.getContext('2d');

    $img.load(function () {
        var maxWidth = 120; // Max width for the image
        var maxHeight = 120; // Max height for the image
        var ratio = 0; // Used for aspect ratio
        var width = this.width; // Current image width
        var height = this.height; // Current image height


        // Check if the current width is larger than the max
        if (width > maxWidth) {
            ratio = maxWidth / width; // get ratio for scaling image
            this.width = maxWidth; // Set new width
            this.height = height * ratio; // Scale height based on ratio
            height = height * ratio; // Reset height to match scaled image
        }

        var width = this.width; // Current image width
        var height = this.height; // Current image height

        // Check if current height is larger than max
        if (height > maxHeight) {
            ratio = maxHeight / height; // get ratio for scaling image
            this.height = maxHeight; // Set new height
            this.width = width * ratio; // Scale width based on ratio
            width = width * ratio; // Reset width to match scaled image
        }
        var newWidth = this.width;
        var newHeight = this.height;
        context.drawImage(this, 0, 0, newWidth, newHeight);
    });

  }
});