Question

我为图片创建了单一上传，并将图片放到了画布http://jsfiddle.net/StJnY/。现在我想为多个上传图像修改我的脚本，这是我的修改脚本：

JS：

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

                var reader = new FileReader();
                reader.onload = fileOnload(numb, e);
                reader.readAsDataURL(file);
            }
        }

    });

    function fileOnload(numb, e) {
        var $img = $('<img>', {
            src: e.target.result
        });
        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);
        });

    }
});

但e.target.result未定义。

http://jsfiddle.net/StJnY/3/

Answer 1

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

＆＃13;

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function (f) {
    var data = f.target.result;                    
    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
    });
  };
  reader.readAsDataURL(file);
});

＆＃13;

canvas{
  border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>

＆＃13;

Answer 2

好的，我已经解决了。 http://jsfiddle.net/StJnY/5/

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);
  }

});

对于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);
    });

  }
});

多个图像上传和画布上的图像预览

2 个答案: