vue.js에서 로컬 미리보기, 자르기, 압축, 이미지 업로드와 같은 일련의 기능을 구현합니다.-JS 튜토리얼-php.cn

vue.js에서 로컬 미리보기, 자르기, 압축, 이미지 업로드와 같은 일련의 기능을 구현합니다.

亚连

풀어 주다： 2018-06-02 11:15:55

원래의

2713명이 탐색했습니다.

이 글에서는 이미지의 로컬 미리보기, 자르기, 압축 및 업로드를 구현하는 vue.js를 주로 소개합니다. 코드는 간단하고 이해하기 쉽고 매우 좋으며 도움이 필요한 친구들이 참고할 수 있습니다.

다음은 다음과 같습니다. 코드에는 Vue 2.0 및 ES6 구문이 포함됩니다.

Target

ie9 이상의 브라우저와 호환되는 순수 javascrpit 구현은 파일 형식, 길이, 너비 및 크기를 로컬에서 감지하여 브라우저 상호 작용을 줄입니다.

현실은 잔혹합니다. Ie9과 호환되기 위해서는 여전히 플래시가 사용됩니다. 두 번째 기사에서 설명하겠습니다.

코드 구조

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

로그인 후 복사

이미지 크기를 구하는 방법

최신 브라우저에서는 매우 간단합니다

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

로그인 후 복사

하지만 그렇지 않습니다 아직 ie9에서는 사용 가능 찾기 순수한 JS 솔루션.

따라서 크기를 판단해야 할 경우 IE9를 직접 우회하여 판단하지 않아도 됩니다.

로컬 이미지를 미리 보는 방법

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

로그인 후 복사

최신 브라우저에서는 FileReader를 호출하여 로컬 이미지를 읽습니다. 미리보기를 위해 이미지 주소를 Base64 형식으로 변환합니다.

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

로그인 후 복사

하지만 또 문제가 발생합니다. ie9는 FileReader를 지원하지 않지만 ie 필터를 통해 표시할 수 있습니다.

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

로그인 후 복사

필터의 sizingMethod='scale' 은 이미지가 콘텐츠의 크기에 맞춰 조정될 수 있도록 작성되었습니다. sizingMethod='scale' 的写法是为了图片能适应内容缩放。

由于 IE9 对安全限制有所增强，实践中会遇到以下两个问题：

如果 file 控件获得焦点，则 document.selection.createRange() 拒绝访问，因此需要在 elInput.select() 后面加一句 elInput.blur() 即可。

为了让上传按钮更美观，默认给 input[type=file] 的设置了样式 visible:hidden ，这样会导致 ie9 下报错。应该会被浏览器认为欺骗用户点击，只好曲线救国。

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

로그인 후 복사

如何获取图片长宽

同理，利用 ie 滤镜和 FileReader 的方案对 ie9 和非 ie9 分别实现。

ie9 的方案

参数 src 接受的是本地图片路径

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

로그인 후 복사

其中 sizingMethod='image'

IE9의 향상된 보안 제한으로 인해 실제로는 다음 두 가지 문제에 직면하게 됩니다.

파일 제어가 포커스를 얻으면 document.selection.createRange() 가 액세스를 거부하므로 필요합니다. elInput.select() 뒤에 elInput.blur()를 추가하면 됩니다.

업로드 버튼을 더 아름답게 만들기 위해 input[type=file] 에는 visible:hidden 스타일이 기본으로 설정되어 있으며, 이로 인해 IE9에서는 오류가 발생합니다. . 브라우저에서는 사용자가 클릭하도록 속이는 것으로 간주해야 하므로 국가를 저장하려면 곡선을 거쳐야 합니다.

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

로그인 후 복사

이미지 길이와 너비를 얻는 방법

마찬가지로 ie 필터와 FileReader 솔루션을 사용하여 각각 ie9 및 non-ie9에 대해 구현합니다.

ie9

매개변수 src의 솔루션은 로컬 이미지 경로

rrreee
를 허용합니다. 여기서 sizingMethod='image' 는 이미지의 원래 크기를 표시하는 것입니다.

Non-ie9 솔루션

매개변수 src는 base64로 인코딩된 이미지 경로를 허용합니다

🎜🎜rrreee🎜🎜🎜위 내용은 제가 나중에 모든 사람에게 도움이 되기를 바랍니다. 🎜🎜관련 글: 🎜🎜🎜Vue가 다음 표를 통해 배열을 수정했는데 페이지가 렌더링되지 않는 문제에 대한 해결 방법 🎜🎜🎜🎜🎜vue2.0 axios 크로스 도메인 및 렌더링 문제 해결 🎜🎜🎜🎜🎜옵션 Layui에서 선택의 오버레이 문제 해결책🎜🎜🎜🎜🎜🎜🎜🎜🎜

위 내용은 vue.js에서 로컬 미리보기, 자르기, 압축, 이미지 업로드와 같은 일련의 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!