iT邦幫忙

0

圖片迴圈

  • 分享至 

  • xImage
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
        display:none;
    }
  </style>
</head>
<body>
  <input id="file" type="file" multiple>
  <div id="a"></div>
  <script src="js/jquery.js"></script>
  <script>
        var fileInput = document.getElementById('file');
        var fileLists = [];
        var files;
        var room_id;
        var cover = 0;
        var checked;
        $('#file').on('change', function(event) {
            files = fileInput.files;    //重新取得[input type='file']資料
            show_img();
        }); 
        function show_img(){
            if(fileLists.length == 0){
                checked = 1;
            }
            files = Array.prototype.slice.call(files);  //將偽數組轉成陣列   
            fileLists = fileLists.concat(files);  //concat() 方法用於連接兩個或多個數組(陣列) 
            //顯示圖片資訊
            if (files.length !== 0) {
                for (let i = 0; i < files.length; i++) {
                    let reader = new FileReader();              //FileReader 為預設物件,用來讀取檔案
                    let img = new Image();
                    reader.onload = (function() {
                        return function(e){
                            img.src = e.target.result;
                            img.onload = function(){
                                var canvas = document.createElement('canvas');      //創建canvas
                                var context = canvas.getContext('2d');              //2D圖像
                                // 图片原始尺寸
                                //console.log(img.src);
                                var originWidth = this.width;
                                var originHeight = this.height;
                                // 最大尺寸限制
                                var maxWidth = 100, maxHeight = maxWidth*originHeight/originWidth;
                                // 目标尺寸
                                var targetWidth = originWidth, targetHeight = originHeight;
                                canvas.width = maxWidth;
                                canvas.height = maxHeight;
                                // 清除画布
                                
                                // 图片压缩
                                context.drawImage(img, 0, 0, maxWidth, maxHeight);
                                let base64 = canvas.toDataURL('image/jpeg',1.0);
                                $('#a').append(canvas);
                                
                                console.log(base64);
                                let input_img = "<img src="+base64+">";
                                $('#a').append(input_img);                            
                            }
                        }
                    })(); 
                    reader.readAsDataURL(files[i]);         //讀取檔案後執行load事件
                }      
            }
            event.target.value = "";                            //讓剛被刪除的圖片可重複上傳
        } 
  </script>
</body>
</html>

我依網路上的code 改成先canvas後再顯示圖片,現在迴圈只能顯示選取的最後一張,請問應該要怎麼改動呢?謝謝

看更多先前的討論...收起先前的討論...
fillano iT邦超人 1 級 ‧ 2019-11-15 10:27:59 檢舉
我跑了一下,每次選取都會跑出當次的圖片,看起來沒問題阿?
豬豬人 iT邦新手 4 級 ‧ 2019-11-15 10:29:20 檢舉
fillano 我是設定可以多選選,擇兩張以上 ,只會跑出最後選的圖片
fillano iT邦超人 1 級 ‧ 2019-11-15 10:41:17 檢舉
我試了一下,多選也ok,選三張就會跑出三張的縮圖,三張都不一樣...
豬豬人 iT邦新手 4 級 ‧ 2019-11-15 10:47:44 檢舉
真的ㄟ !!!那我剛剛測怎麼不行 好奇怪,哈哈 謝謝 fillano大大
fillano iT邦超人 1 級 ‧ 2019-11-15 10:59:17 檢舉
如果要挑的話,其實:
reader.onload = function(e)
就可以了,不用再跑一個IIFE然後return function(e)...
豬豬人 iT邦新手 4 級 ‧ 2019-11-15 14:06:47 檢舉
我把IIFE拿掉就跑不出來了... 可以告訴我完整程式碼嗎? 謝謝
(function() {
return
})();
單純拿掉這段而已
fillano iT邦超人 1 級 ‧ 2019-11-16 10:28:57 檢舉
https://codepen.io/hsu-ping-feng/pen/QWWJrgg
如果還不確定要拿掉哪裡的話...
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答