多幅圖像上傳和畫布上的圖像預覽

我已經爲圖像創建單個上傳圖像並將圖像放入畫布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/

來源

2014-07-17 GeekToL

好吧，我已經解決了。 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); 
    }); 

    } 
});

來源

2014-07-18 17:37:12 GeekToL

你可以用布JS。您可以在畫布上上傳多個圖像。

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

canvas{ 
 
    border: 1px solid black; 
 
}

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

來源

2016-04-25 04:54:48

多幅圖像上傳和畫布上的圖像預覽

回答

相關問題