Vue. js enables local image preview, cropping, compression, and uploading, and vue. js Cropping

Vue. js enables local image preview, cropping, compression, and uploading, and vue. js Cropping

The following code involves Vue 2.0 and ES6 syntax.

Target

Pure javascrpit implementation, compatible with ie9 and later browsers, checks the file format, length, width, and size locally to reduce browser interaction.

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

Code structure

<Div id = "wrap"> <label> Click Upload image <input type = 'file' @ change = "change" ref = "input"> </label>  </div> new Vue ({el: '# wrap', data: {// a transparent image src: 'Data: image/gif; base64, R0lGODlhAQABAIAAAAAAAP // yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 ', elInput: null}, methods: {change (e ){//...}}})

How to get the image size

Modern browsers are very simple

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

However, no pure JS solution is found in ie9.

Therefore, when it is necessary to determine the size of the hour, when ie9 is directly bypassed, it will not be judged

How to preview local Images

const refs = this.$refsconst elInput = refs.inputconst elImg = refs.img

In modern browsers, you can call FileReader to read local images and convert the image address to a Base64 format for 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]); }}

However, the problem persists. ie9 does not support FileReader, but can be displayed through the ie filter.

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

FiltersizingMethod='scale' To adapt to content scaling.

Due to the security restrictions of IE9, the following two problems may occur in practice:

If the file control gets the focusdocument.selection.createRange() Access is denied.elInput.select() Add one sentenceelInput.blur()You can.

To make the upload button more beautifulinput[type=file] Set the style visible:hidden This will cause an error in ie9. It should be thought by the browser to cheat the user to click, so it has to save the country.

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

How to obtain the length and width of an image

Similarly, ie9 and non-ie9 are implemented using the ie filter and FileReader.

Ie9 Solution

The src Parameter accepts the local image path.

let tempEl;const getSizeIncompatible = (src, callback) => { if (!tempEl) {  tempEl = document.createElement('div');  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);};

WheresizingMethod='image' It is used to display the original size of the image.

Non-ie9 Solution

The src Parameter accepts the base64 encoded image path.

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

Reference

Https://elemefe.github.io/ima...

Summary

The above is a small series of vue. js allows you to preview, crop, and compress images locally. We hope this will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!