原始大小的圖像文件與vuejs

Question

此刻我正在做一個文件上傳，基本上當我選擇一個文件，我可以編輯他的寬度和高度和其他東西，但我的問題是有關的寬度和重量，基本上是什麼我需要的是獲得原始圖像大小的寬度和高度，目前我可以改變它，它工作的很好。

所以我有這樣的：

<div id="holder" class="col-md-offset-2"> 
      <div v-if="!image"> 
       <input type="file" @change="onFileChange"> 
      </div> 
      <div v-else> 
       <div class="col-md-6"> 
        <div class="form-group"> 
         <label class="control-label col-md-2">width</label> 
         <div class="col-md-10"> 
          <input class="form-control" v-model="docImage.width" type="number" /> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="control-label col-md-2">height</label> 
         <div class="col-md-10"> 
          <input class="form-control" v-model="docImage.height" type="number" /> 
         </div> 
        </div> 


data() { 
    return { 
     image: '', 
     docImage: { 
      key: 'Image', 
      width: '100', 
      height: '100', 
      base64: "", 
      align: "left", 
     }, 
     alignChoices: [ 
      'left', 
      'right', 
      'center' 
     ] 

    } 
}, 

onFileChange(e) { 
      var files = e.target.files || e.dataTransfer.files; 
      if (!files.length) 
       return; 
      this.createImage(files[0]); 
     }, 
     createImage(file) { 
      var image = new Image(); 
      var reader = new FileReader(); 
      var vm = this; 

      reader.onload = (e) => { 
       vm.image = e.target.result; 
       vm.docImage.base64 = vm.image.split(",")[1]; // get the base64 string defined after the comma 
      }; 
      reader.readAsDataURL(file); 
     }, 
     removeImage: function (e) { 
      this.image = ''; 
     }, 

Answer 1

這裏是片段。

window.URL = window.URL || window.webkitURL; 
 
var elBrowse = document.getElementById("browse"), 
 
    elPreview = document.getElementById("preview"), 
 
    useBlob = false && window.URL; // Set to `true` to use Blob instead of Data-URL 
 

 
// 2. 
 
function readImage (file) { 
 

 
    // Create a new FileReader instance 
 
    // https://developer.mozilla.org/en/docs/Web/API/FileReader 
 
    var reader = new FileReader(); 
 

 
    // Once a file is successfully readed: 
 
    reader.addEventListener("load", function() { 
 

 
    // At this point `reader.result` contains already the Base64 Data-URL 
 
    // and we've could immediately show an image using 
 
    // `elPreview.insertAdjacentHTML("beforeend", "<img src='"+ reader.result +"'>");` 
 
    // But we want to get that image's width and height px values! 
 
    // Since the File Object does not hold the size of an image 
 
    // we need to create a new image and assign it's src, so when 
 
    // the image is loaded we can calculate it's width and height: 
 
    var image = new Image(); 
 
    image.addEventListener("load", function() { 
 

 
     // Concatenate our HTML image info 
 
     var imageInfo = file.name +' '+ // get the value of `name` from the `file` Obj 
 
      image.width +'×'+ // But get the width from our `image` 
 
      image.height +' '+ 
 
      file.type +' '+ 
 
      Math.round(file.size/1024) +'KB'; 
 

 
     // Finally append our created image and the HTML info string to our `#preview` 
 
     elPreview.appendChild(this); 
 
     elPreview.insertAdjacentHTML("beforeend", imageInfo +'<br>'); 
 

 
     // If we set the variable `useBlob` to true: 
 
     // (Data-URLs can end up being really large 
 
     // `src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA...........etc` 
 
     // Blobs are usually faster and the image src will hold a shorter blob name 
 
     // src="blob:http%3A//example.com/2a303acf-c34c-4d0a-85d4-2136eef7d723" 
 
     if (useBlob) { 
 
     // Free some memory for optimal performance 
 
     window.URL.revokeObjectURL(image.src); 
 
     } 
 
    }); 
 
\t \t 
 
    image.src = useBlob ? window.URL.createObjectURL(file) : reader.result; 
 

 
    }); 
 

 
    // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL 
 
    reader.readAsDataURL(file); 
 
} 
 

 
// 1. 
 
// Once the user selects all the files to upload 
 
// that will trigger a `change` event on the `#browse` input 
 
elBrowse.addEventListener("change", function() { 
 

 
    // Let's store the FileList Array into a variable: 
 
    // https://developer.mozilla.org/en-US/docs/Web/API/FileList 
 
    var files = this.files; 
 
    // Let's create an empty `errors` String to collect eventual errors into: 
 
    var errors = ""; 
 

 
    if (!files) { 
 
    errors += "File upload not supported by your browser."; 
 
    } 
 

 
    // Check for `files` (FileList) support and if contains at least one file: 
 
    if (files && files[0]) { 
 

 
    // Iterate over every File object in the FileList array 
 
    for(var i=0; i<files.length; i++) { 
 

 
     // Let's refer to the current File as a `file` variable 
 
     // https://developer.mozilla.org/en-US/docs/Web/API/File 
 
     var file = files[i]; 
 

 
     // Test the `file.name` for a valid image extension: 
 
     // (pipe `|` delimit more image extensions) 
 
     // The regex can also be expressed like: /\.(png|jpe?g|gif)$/i 
 
     if ((/\.(png|jpeg|jpg|gif)$/i).test(file.name)) { 
 
     // SUCCESS! It's an image! 
 
     // Send our image `file` to our `readImage` function! 
 
     readImage(file); 
 
     } else { 
 
     errors += file.name +" Unsupported Image extension\n"; 
 
     } 
 
    } 
 
    } 
 

 
    // Notify the user for any errors (i.e: try uploading a .txt file) 
 
    if (errors) { 
 
    alert(errors); 
 
    } 
 

 
});

#preview img{ height:100px; }

<input id="browse" type="file" multiple> 
 
<div id="preview"></div>