vue での Cropperjs の使用

今回は、Vue で Cropperjs を使用する方法と、Vue で Cropperjs を使用する際の注意点について説明します。以下は実践的なケースです。

Vue を使用するプロジェクトで画像をトリミングする必要があるため、cropperjs を使用しましたが、使用中にいくつかの落とし穴にも遭遇しました。以下に、.vue ファイル内の Cropperjs の使用方法と教訓をまとめます。を使用して、最初に導入します:

プロジェクト内で実行:

npm install cropperjs -save

テンプレート内:

<p> 
  <!-- 遮罩层 --> 
  </p><p> 
   </p><p> 
    <img  src="/static/imghw/default1.png" data-src="url" class="lazy" alt="vue での Cropperjs の使用" > 
   </p>
   <button>确定</button>
   
  <p> 
    </p><p> 
     </p><p> 
     </p> 
    
    <p> 
     <input> 
     <label></label> 
    </p> 
   
 

js コード:

import Cropper from 'cropperjs' 
export default { 
 components: { 
 }, 
 data () { 
  return { 
   headerImage:'', 
   picValue:'', 
   cropper:'', 
   croppable:false, 
   panel:false, 
   url:'' 
  } 
 }, 
 mounted () { 
  //初始化这个裁剪框 
  var self = this; 
  var image = document.getElementById('image'); 
  this.cropper = new Cropper(image, { 
   aspectRatio: 1, 
   viewMode: 1, 
   background:false, 
   zoomable:false, 
   ready: function () { 
    self.croppable = true; 
   } 
  }); 
 }, 
 methods: { 
  getObjectURL (file) { 
   var url = null ;  
   if (window.createObjectURL!=undefined) { // basic 
    url = window.createObjectURL(file) ; 
   } else if (window.URL!=undefined) { // mozilla(firefox) 
    url = window.URL.createObjectURL(file) ; 
   } else if (window.webkitURL!=undefined) { // webkit or chrome 
    url = window.webkitURL.createObjectURL(file) ; 
   } 
   return url ; 
  }, 
  change (e) { 
   let files = e.target.files || e.dataTransfer.files; 
   if (!files.length) return; 
   this.panel = true; 
   this.picValue = files[0]; 
   this.url = this.getObjectURL(this.picValue); 
   //每次替换图片要重新得到新的url 
   if(this.cropper){ 
    this.cropper.replace(this.url); 
   } 
   this.panel = true; 
  }, 
  crop () { 
    this.panel = false; 
    var croppedCanvas; 
    var roundedCanvas; 
    if (!this.croppable) { 
     return; 
    } 
    // Crop 
    croppedCanvas = this.cropper.getCroppedCanvas(); 
    console.log(this.cropper) 
    // Round 
    roundedCanvas = this.getRoundedCanvas(croppedCanvas); 
    this.headerImage = roundedCanvas.toDataURL(); 
    this.postImg() 
  }, 
  getRoundedCanvas (sourceCanvas) { 
   var canvas = document.createElement('canvas'); 
   var context = canvas.getContext('2d'); 
   var width = sourceCanvas.width; 
   var height = sourceCanvas.height; 
   canvas.width = width; 
   canvas.height = height; 
   context.imageSmoothingEnabled = true; 
   context.drawImage(sourceCanvas, 0, 0, width, height); 
   context.globalCompositeOperation = 'destination-in'; 
   context.beginPath(); 
   context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true); 
   context.fill(); 
   return canvas; 
  }, 
  postImg () { 
   //这边写图片的上传 
  } 
 } 
}

全体的な効果:

CSSコード (かなり長いので、当初は投稿するつもりはありませんでしたが、子供たちが簡単にデモを直接実行できるようにしたかったため、投稿することにしました。長さについてはご容赦ください):

*{ 
 margin: 0; 
 padding: 0; 
} 
#demo #button { 
 position: absolute; 
 right: 10px; 
 top: 10px; 
 width: 80px; 
 height: 40px; 
 border:none; 
 border-radius: 5px; 
 background:white; 
} 
#demo .show { 
 width: 100px; 
 height: 100px; 
 overflow: hidden; 
 position: relative; 
 border-radius: 50%; 
 border: 1px solid #d5d5d5; 
} 
#demo .picture { 
 width: 100%; 
 height: 100%; 
 overflow: hidden; 
 background-position: center center; 
 background-repeat: no-repeat; 
 background-size: cover;  
} 
#demo .container { 
  z-index: 99; 
  position: fixed; 
  padding-top: 60px; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  background:rgba(0,0,0,1); 
}
#demo #image { 
 max-width: 100%; 
}
.cropper-view-box,.cropper-face { 
 border-radius: 50%; 
} 
/*! 
 * Cropper.js v1.0.0-rc 
 * https://github.com/fengyuanchen/cropperjs 
 * 
 * Copyright (c) 2017 Fengyuan Chen 
 * Released under the MIT license 
 * 
 * Date: 2017-03-25T12:02:21.062Z 
 */
.cropper-container { 
 font-size: 0; 
 line-height: 0;
 position: relative;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 direction: ltr; 
 -ms-touch-action: none; 
 touch-action: none
} 
.cropper-container img { 
 /* Avoid margin top issue (Occur only when margin-top <p style="text-align: left;"></p> <p style="text-align: left;"></p><p style="text-align: left;"><span style="color: #ff0000"></span>この記事を読んだ後は、このケースをマスターしたと思います。さらにエキサイティングな方法については、php 中国語 Web サイトの他の関連記事に注目してください。 </p><p>推奨読書: </p><p></p>WeChat Web側でバックフォースリフレッシュを実装する方法<p><a href="http://www.php.cn/js-tutorial-388955.html" target="_blank"></a></p>jsを使用してHTMLページ内の画像のアドレスを素早く取得します<p><a href="http://www.php.cn/js-tutorial-388951.html" target="_blank"></a><br></p>自動的に更新され、自動的に取得されるようにCookieの有効期限を設定します<p><a href="http://www.php.cn/js-tutorial-388941.html" target="_blank"></a></p>

以上がvue での Cropperjs の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。