Implement a series of functions such as local preview, cropping, compression, and uploading of images in vue.js

This article mainly introduces vue.js to implement the image local preview, cropping, compression and upload function. The code is simple and easy to understand, very good, and has reference value. Friends in need can refer to it

The following code involves Vue 2.0 and ES6 syntax.

Goal

Pure javascrpit implementation, compatible with ie9 and above browsers, and detect file format, length, width, and size locally. Reduce browser interaction.

The reality is cruel. In order to be compatible with Ie9, flash is still used. The second article will explain it.

Code structure

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

How to get the image size

It is very simple in modern browsers

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

But there is no pure JS solution found under ie9.

Therefore, when you need to judge the size, you will directly bypass IE9 and not judge it.

How to preview local images

##

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

In modern browsers, local images are read by calling FileReader and the image address is converted into Base64 format to achieve preview.

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

But the problem comes again, ie9 does not support FileReader, but it can be displayed through ie filters.

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

The

sizingMethod='scale' in the filter is written so that the image can adapt to the scaling of the content.

Due to the enhanced security restrictions of IE9, the following two problems will be encountered in practice:

If the file control gains focus, then

document.selection.createRange() Access is denied, so you need to add elInput.blur() after elInput.select() .

In order to make the upload button more beautiful, the style

visible:hidden is set by default for input[type=file] , which will cause an error under ie9. It should be considered by the browser as deceiving users to click, so they have to go through curves to save the country.

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

How to get the image length and width

Similarly, use ie filters and The FileReader solution is implemented separately for ie9 and non-ie9.

ie9 solution

The parameter src accepts the local image path

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

where

sizingMethod='image' is to display the original size of the image.

Non-ie9 solution

The parameter src accepts the base64 encoded image path

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Solving the problem of Vue modifying the array through the following table and the page not rendering

vue2.0 axios Solution to the problem of cross-domain and rendering

Solution to the option overlay problem of select in layui

The above is the detailed content of Implement a series of functions such as local preview, cropping, compression, and uploading of images in vue.js. For more information, please follow other related articles on the PHP Chinese website!