2021-06-10  本文已影响0人  zsyyyyy

        <input id="input" type="file" multiple accept="image/*">
        <div id="container" class="img-container"></div>

第一种FileReader 拿到base64

            var aInput = document.getElementById("input"),
                imgContainer = document.getElementById("container");
            aInput.addEventListener('change', function() {
                for (var i = 0; i < this.files.length; i++) {
                    var img = new Image(),
                        reader = new FileReader(),
                        url = reader.readAsDataURL(this.files[i]);
                    imgContainer.appendChild(img);

                    reader.onload = function(e) {
                        img.src = e.target.result;//base64
                    }
                }
            })

第二种获取本地路径，不需要转base64

           var img = new Image();
           var aInput = document.getElementById("input");
           aInput.addEventListener('change', function(e) {
               console.log(e);
               const file = e.srcElement.files[0]
               const imgURL = window.URL.createObjectURL(file) // imgURL就是你的图片的本地路径，两部就能解决问题
               console.log(imgURL);
               img.src = imgURL;
               
           })
           // img.src = './assets/logo.png';
           document.getElementById('container').appendChild(img)

第三种canvas

            var img = new Image(),
                canvas;
            img.onload = function() {
                canvas = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;
                var context = canvas.getContext('2d');
                context.drawImage(img, 0, 0);
                console.log(canvas.toDataURL());//base64
                document.body.appendChild(canvas);
                return canvas;
            }
            img.src = './assets/logo.png';//写死的相对路径，但是选择图片路径肯定不是固定的，以下是获取图片的本地路径


            var aInput = document.getElementById("input");
            aInput.addEventListener('change', function(e) {
                console.log(e);
                const file = e.srcElement.files[0]
                const imgURL = window.URL.createObjectURL(file) // imgURL就是你的图片的本地路径，两部就能解决问题
                console.log(imgURL);
                img.src = imgURL;

            })
            //drawImage即将img画到画布区域内,接收三个参数,第一个是img对象,第二个是绘制的起始位置水平,第三个是绘制的垂直位置。