Implementieren Sie eine Reihe von Funktionen wie lokale Vorschau, Zuschneiden, Komprimieren und Hochladen von Bildern in vue.js

In diesem Artikel wird hauptsächlich vue.js vorgestellt, um die lokale Vorschau-, Zuschneide-, Komprimierungs- und Hochladefunktion von Bildern zu implementieren. Der Code ist einfach und leicht zu verstehen, sehr gut und hat Referenzwert 🎜>

Der folgende Code beinhaltet Vue 2.0- und ES6-Syntax.

Ziel

Reine Javascript-Implementierung, kompatibel mit Browsern ab IE9 und erkennt Dateiformat, Länge, Breite und Größe lokal im Browser Interaktion.

Die Realität ist grausam, um mit Ie9 kompatibel zu sein. Der zweite Artikel wird es erklären.

Codestruktur

<p id="wrap">
 <label>
  点我上传图片
  <input type=&#39;file&#39; @change="change" ref="input">
 </label>
 <img :src="src" ref="img">
</p>
new Vue({
 el: &#39;#wrap&#39;,
 data: {
  // 一张透明的图片
  src:&#39;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&#39;, 
  elInput: null
 },
 methods: {
  change(e){
   // ...
  }
 }
})

So erhalten Sie das Bild Größe

In modernen Browsern ist es sehr einfach

function getSize(e){
 return e.target.files[0].size;
}

Unter ie9 gibt es jedoch keine reine JS-Lösung.

Wenn Sie daher die Größe beurteilen müssen, können Sie IE9 direkt umgehen und nicht beurteilen

So zeigen Sie eine Vorschau lokaler Bilder an

const refs = this.$refs
const elInput = refs.input
const elImg = refs.img

In modernen Browsern können Sie lokale Bilder lesen, indem Sie FileReader aufrufen und die Bildadresse zur Vorschau in das Base64-Format konvertieren.

function getSrc(){
 const reader = new FileReader();
 reader.onload = (e) => {
  const src = e.target.result;
  elImg.src = src;
 };
 if (elInput.files && elInput.files[0]) {
  reader.readAsDataURL(elInput.files[0]);
 }
}

Aber das Problem kommt wieder, ie9 unterstützt FileReader nicht, kann aber über ie-Filter angezeigt werden.

function getSrc(){
 elInput.select();
 elInput.blur();
 const src = document.selection.createRange().text;
 document.selection.empty();
 elImg.style.filter = `progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='${src}')`;
}

Das

im Filter ist so geschrieben, dass sich das Bild an die Inhaltsskalierung anpassen kann. sizingMethod='scale'

Aufgrund der erhöhten Sicherheitsbeschränkungen von IE9 werden in der Praxis die folgenden zwei Probleme auftreten:

Wenn die Dateikontrolle den Fokus erhält, wird der Zugriff verweigert

, also muss es so sein in document.selection.createRange() Fügen Sie einfach elInput.select() danach hinzu. elInput.blur()

Um den Upload-Button schöner zu machen, ist der Stil

standardmäßig für input[type=file] eingestellt, was unter IE9 zu einem Fehler führt. Es sollte vom Browser als Täuschung der Benutzer zum Klicken angesehen werden, sodass sie durch Kurven gehen müssen, um das Land zu retten. visible:hidden

label{
 overflow:hidden;
}
label input[type='file']{
 position:absolute;
 top:9999px;
 left:9999px;
}

So erhalten Sie die Bildlänge und -breite

Verwenden Sie auf ähnliche Weise Filter und Die FileReader-Lösung wird separat für IE9 und Nicht-IE9 implementiert.

IE9-Lösung

Der Parameter src akzeptiert den lokalen Bildpfad

let tempEl;
const getSizeIncompatible = (src, callback) => {
 if (!tempEl) {
  tempEl = document.createElement('p');
  tempEl.style.position = 'absolute';
  tempEl.style.width = '1px';
  tempEl.style.height = '1px';
  tempEl.style.left = '-9999px';
  tempEl.style.top = '-9999px';
  tempEl.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)';
  document.body.insertBefore(tempEl, document.body.firstChild);
 }
 tempEl.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
 callback(tempEl.offsetWidth, tempEl.offsetHeight);
};

wo

dient dazu, die Originalgröße des Bildes anzuzeigen. sizingMethod='image'

Nicht-ie9-Lösung

Der Parameter src akzeptiert den Base64-codierten Bildpfad

const getSize = (src, callback) => {
 const image = new Image();
 image.onload = () => {
  callback(image.width, image.height);
 };
 image.src = src;
};

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Lösung des Problems, dass die Seite nicht gerendert wird, wenn Vue das Array über die folgende Tabelle ändert

vue2.0 axios Lösung für das Problem des domänenübergreifenden Renderns

Lösung für das Optionsüberlagerungsproblem von select in Laui

Das obige ist der detaillierte Inhalt vonImplementieren Sie eine Reihe von Funktionen wie lokale Vorschau, Zuschneiden, Komprimieren und Hochladen von Bildern in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!