画像のローカルプレビュー、トリミング、圧縮、アップロードなどの一連の機能をvue.jsで実装します。-jsチュートリアル-php.cn

画像のローカルプレビュー、トリミング、圧縮、アップロードなどの一連の機能をvue.jsで実装します。

亚连

リリース： 2018-06-02 11:15:55

オリジナル

2713 人が閲覧しました

この記事では主に、画像のローカルプレビュー、トリミング、圧縮、アップロードを実装するための vue.js を紹介します。コードはシンプルでわかりやすく、非常に優れており、必要な友人は参照できます。

以下。コードには Vue 2.0 および ES6 構文が含まれます。

ターゲット

純粋な javascrpit 実装。ie9 以降のブラウザと互換性があり、ファイル形式、長さ、幅、サイズをローカルに検出して、ブラウザの操作を軽減します。

現実は残酷です。Ie9と互換性を持たせるために、2番目の記事で説明します。

コード構造

<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 の強化されたセキュリティ制限により、実際には次の 2 つの問題が発生します:

ファイルコントロールがフォーカスを取得すると、 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と非ie9に実装します。

ie9 の解決策

パラメーター src は、ローカル画像パス

rrreee
を受け入れます。ここで、sizingMethod='image' は、画像の元のサイズを表示します。

IE9 以外のソリューション

パラメータ src は、base64 でエンコードされた画像パスを受け入れます

🎜🎜rrreee🎜🎜🎜 上記は私がまとめたもので、将来的に皆さんのお役に立てれば幸いです。 🎜🎜関連記事: 🎜🎜🎜Vue が以下の表に従って配列を変更し、ページがレンダリングされない問題の解決策 🎜🎜🎜🎜🎜vue2.0 axios クロスドメインとレンダリングの問題の解決策 🎜🎜🎜🎜🎜オプションlayuiでの選択のオーバーレイの問題解決策🎜🎜🎜🎜🎜🎜🎜🎜🎜

以上が画像のローカルプレビュー、トリミング、圧縮、アップロードなどの一連の機能をvue.jsで実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。