美文网首页

作者: zsyyyyy | 来源:发表于2021-06-10 21:45 被阅读0次
            <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对象,第二个是绘制的起始位置水平,第三个是绘制的垂直位置。
    

    相关文章

      网友评论

          本文标题:

          本文链接:https://www.haomeiwen.com/subject/hlypeltx.html