Implémentez une série de fonctions telles que l'aperçu local, le recadrage, la compression et le téléchargement d'images dans vue.js

Cet article présente principalement vue.js pour implémenter la fonction locale de prévisualisation, de recadrage, de compression et de téléchargement des images. Le code est simple et facile à comprendre, très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer. 🎜>

Le code suivant implique la syntaxe Vue 2.0 et ES6.

Cible

Implémentation javascrpit pure, compatible avec les navigateurs ie9 et supérieurs, et détecte le format, la longueur, la largeur et la taille du fichier localement. interaction.

La réalité est cruelle. Afin d'être compatible avec Ie9, le flash est toujours utilisé. Le deuxième article l'expliquera.

Structure du code

<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){
   // ...
  }
 }
})

Comment obtenir la taille de l'image

C'est très simple dans les navigateurs modernes

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

Mais il n'y a pas de solution JS pure trouvé sous ie9.

Par conséquent, lorsque vous devez juger de la taille, vous pouvez directement contourner IE9 et ne pas le juger

Comment prévisualiser les images locales

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

Dans les navigateurs modernes, vous pouvez lire les images locales en appelant FileReader et convertir l'adresse de l'image au format Base64 pour en prévisualiser.

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]);
 }
}

Mais le problème revient, ie9 ne prend pas en charge FileReader, mais il peut être affiché via les filtres ie.

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}')`;
}

Le

dans le filtre est écrit afin que l'image puisse s'adapter à la mise à l'échelle du contenu. sizingMethod='scale'

En raison des restrictions de sécurité renforcées d'IE9, les deux problèmes suivants seront rencontrés dans la pratique :

Si le contrôle des fichiers obtient le focus, l'accès est refusé

, il doit donc être dans document.selection.createRange() Ajoutez simplement elInput.select() après. elInput.blur()

Afin de rendre le bouton de téléchargement plus beau, le style

est défini par défaut pour input[type=file] , ce qui provoquera une erreur sous IE9. Cela devrait être considéré par le navigateur comme une tromperie pour les utilisateurs qui cliquent, ils doivent donc parcourir des courbes pour sauver le pays. visible:hidden

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

Comment obtenir la longueur et la largeur de l'image

De même, utilisez ie filter Les solutions miroir et FileReader sont implémentées séparément pour ie9 et non-ie9.

Solution ie9

Le paramètre src accepte le chemin de l'image locale

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);
};

Parmi eux,

consiste à afficher la taille originale de l'image. sizingMethod='image'

Solution non-ie9

Le paramètre src accepte le chemin de l'image encodé en base64

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Résoudre le problème que la page ne s'affiche pas lorsque Vue modifie le tableau via le tableau suivant

vue2.0 axios Solution au problème du rendu inter-domaines

Solution au problème de superposition d'options de select dans layui

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!