Encapsulate vue based on cropper.js to implement the function of online image cropping component

This article mainly introduces the function of online image cropping component based on cropper.js encapsulating vue. It is very good and has reference value. Friends in need can refer to it.

The rendering is as shown below,

github:demo download

cropper.js

github:cropper.js

Official website (demo)

cropper.js installation

• ##npm or bower installation

npm install cropper
# or
bower install cropper

clone download: Download address

git clone https://github.com/fengyuanchen/cropper.git

Reference cropper.js

Mainly reference two files, cropper.js and cropper.css

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link href="/path/to/cropper.css" rel="external nofollow" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

Note: You must first introduce the jquery file before you can use the cropper.js plug-in

Simple use

Build the p container used for screenshots

<!-- Wrap the image or canvas element with a block element (container) -->
<p>
 ![](picture.jpg)
</p>

Add the style of the container and let the img fill the entire container (very important)

/* Limit image width to avoid overflow the container */
img {
 max-width: 100%; /* This rule is very important, please do not ignore this! */
}

Call cropper.js method, initialize the screenshot control

$('#image').cropper({
 aspectRatio: 16 / 9,
 crop: function(e) {
 // Output the result data for cropping image.
 console.log(e.x);
 console.log(e.y);
 console.log(e.width);
 console.log(e.height);
 console.log(e.rotate);
 console.log(e.scaleX);
 console.log(e.scaleY);
 }
});

For other detailed APIs, please refer to: github:cropper.js

Encapsulated into vue Component

Problems that need to be solved when encapsulating into vue components

• cropper.js related

Simulate the input box to click to select the picture and limit the format and size of the selected picture

Reselect the picture for cropping

Confirm the cropping and obtain the image information in base64 format

• vue related

Communication issues between non-parent and child components

Simulate the input box to click on the selected image and format the selected image , size limit

Construct a hidden input tag, and then simulate clicking on this input to achieve the function of selecting pictures

<!-- input框 -->
<input id="myCropper-input" type="file" :accept="imgCropperData.accept" ref="inputer" @change="handleFile">
//模拟点击
document.getElementById(&#39;myCropper-input&#39;).click();

Bind a method for input to monitor content changes, get the uploaded file, and perform format and size verification

// imgCropperData: {
// accept: 'image/gif, image/jpeg, image/png, image/bmp',
// }
handleFile (e) {
 let _this = this;
 let inputDOM = this.$refs.inputer;
 // 通过DOM取文件数据
 _this.file = inputDOM.files[0];
 // 判断文件格式
 if (_this.imgCropperData.accept.indexOf(_this.file.type) == -1) {
 _this.$Modal.error({
  title: '格式错误',
  content: '您选择的图片格式不正确！'
 });
 return;
 }
 // 判断文件大小限制
 if (_this.file.size > 5242880) {
 _this.$Modal.error({
  title: '超出限制',
  content: '您选择的图片过大，请选择5MB以内的图片！'
 });
 return;
 }
 var reader = new FileReader();
 // 将图片将转成 base64 格式
 reader.readAsDataURL(_this.file);
 reader.onload = function () {
 _this.imgCropperData.imgSrc = this.result;
 _this.initCropper();
 }
}

Re-select the picture for cropping

When you select the picture for the first time, you will definitely face the problem of needing to re-select the picture. Then you will be faced with how to replace the picture in the cropping box. The above steps After selecting the image, we got the main information of the image through the FileRender() method. Now we need to rebuild the cropping box to solve the problem. Check the official demo given by cropper.js and find that the official method is to dynamically add a cropping container. For operation, here we imitate the official implementation.

// 初始化剪切
 initCropper () {
 let _this = this;
 // 初始化裁剪区域
 _this.imgObj = $('![](' + _this.imgCropperData.imgSrc + ')');
 let $avatarPreview = $('.avatar-preview');
 $('#myCropper-workspace').empty().html(_this.imgObj);
 _this.imgObj.cropper({
  aspectRatio: _this.proportionX / _this.proportionY,
  preview: $avatarPreview,
  crop: function(e) {

  }
 });
 }

Confirm cropping and obtain image information in base64 format

let $imgData = _this.imgObj.cropper('getCroppedCanvas')
imgBase64Data = $imgData.toDataURL('image/png');

Constructing data for upload

// 构造上传图片的数据
let formData = new FormData();
// 截取字符串
let photoType = imgBase64Data.substring(imgBase64Data.indexOf(",") + 1);
//进制转换
const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
 const byteCharacters = atob(b64Data);
 const byteArrays = [];
 for(let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
 const slice = byteCharacters.slice(offset, offset + sliceSize);
 const byteNumbers = new Array(slice.length);
 for(let i = 0; i < slice.length; i++) {
  byteNumbers[i] = slice.charCodeAt(i);
 }
 const byteArray = new Uint8Array(byteNumbers);
 byteArrays.push(byteArray);
 }
 const blob = new Blob(byteArrays, {
 type: contentType
 });
 return blob;
}
const contentType = &#39;image/jepg&#39;;
const b64Data2 = photoType;
const blob = b64toBlob(b64Data2, contentType);
formData.append("file", blob, "client-camera-photo.png")
formData.append("type", _this.imgType)

Communication issues between non-parent and child components

In previous projects, communication parameters between parent and child components were commonly used. Generally, two methods were used

to place parameters in the router. Then get it by calling route.params.xxx or route.query.xxx

Communicate through props

Here we use eventBus for communication between components

Steps

1. Declare a bus component for component B to pass parameters to component A

//bus.js
import Vue from 'vue'; 
export default new Vue();

2. Reference the bus component in component A and monitor its parameter changes in real time

// A.vue
import Bus from '../../components/bus/bus.js'
export default {
 components: { Bus },
 data () {},
 created: function () {
 Bus.$on('getTarget', imgToken => { 
  var _this = this;
  console.log(imgToken);
  ... 
 }); 
 }
}

3.Component B The bus component is also referenced to pass the parameters to the A component

// B.vue
// 传参
Bus.$emit('getTarget', imgToken);

Reference:

vue-$on

vue-$ emit
vue.js road (4)——eventBus in vue2.0s implements sibling component communication

vue picture selection and screenshot plug-in complete code

<template>
 <p class="myCropper-container">
 <p id="myCropper-workspace">
  <p class="myCropper-words" v-show="!imgCropperData.imgSrc">请点击按钮选择图片进行裁剪</p>
 </p>
 <p class="myCropper-preview" :class="isShort ? &#39;myCropper-preview-short&#39; : &#39;myCropper-preview-long&#39;">
  <p class="myCropper-preview-1 avatar-preview">
  ![](!imgCropperData.imgUploadSrc ? &#39;/images/thumbnail/thumbnail-img.jpg&#39; : imgCropperData.imgUploadSrc)
  </p>
  <p class="myCropper-preview-2 avatar-preview">
  ![](!imgCropperData.imgUploadSrc ? &#39;/images/thumbnail/thumbnail-img.jpg&#39; : imgCropperData.imgUploadSrc)
  </p>
  <p class="myCropper-preview-3 avatar-preview">
  ![](!imgCropperData.imgUploadSrc ? &#39;/images/thumbnail/thumbnail-img.jpg&#39; : imgCropperData.imgUploadSrc)
  </p>
  <input id="myCropper-input" type="file" :accept="imgCropperData.accept" ref="inputer" @change="handleFile">
  <Button type="ghost" class="myCropper-btn" @click="btnClick">选择图片</Button>
  <Button type="primary" class="myCropper-btn" :loading="cropperLoading" @click="crop_ok">确认</Button>
 </p>
 </p>
</template>
<script>
 var ezjsUtil = Vue.ezjsUtil;
 import Bus from &#39;./bus/bus.js&#39; 
 export default {
 components: { Bus },
 props: {
  imgType: {
  type: String
  },
  proportionX: {
  type: Number
  },
  proportionY: {
  type: Number
  }
 },
 data () {
  return {
  imgCropperData: {
   accept: &#39;image/gif, image/jpeg, image/png, image/bmp&#39;,
   maxSize: 5242880,
   file: null, //上传的文件
   imgSrc: &#39;&#39;, //读取的img文件base64数据流
   imgUploadSrc: &#39;&#39;, //裁剪之后的img文件base64数据流
  },
  imgObj: null,
  hasSelectImg: false,
  cropperLoading: false,
  isShort: false,
  }
 },
 created: function () {
  let _this = this;
 },
 mounted: function () {
  let _this = this;
  // 初始化预览区域
  let maxWidthNum = Math.floor(300 / _this.proportionX);
  let previewWidth = maxWidthNum * _this.proportionX;
  let previewHeight = maxWidthNum * _this.proportionY;
  if (previewWidth / previewHeight <= 1.7) {
  previewWidth = previewWidth / 2;
  previewHeight = previewHeight / 2;
  _this.isShort = true;
  }
  // 设置最大预览容器的宽高
  $(&#39;.myCropper-preview-1&#39;).css(&#39;width&#39;, previewWidth + &#39;px&#39;);
  $(&#39;.myCropper-preview-1&#39;).css(&#39;height&#39;, previewHeight + &#39;px&#39;);
  // 设置中等预览容器的宽高
  $(&#39;.myCropper-container .myCropper-preview .myCropper-preview-2&#39;).css(&#39;width&#39;,( previewWidth / 2) + &#39;px&#39;);
  $(&#39;.myCropper-container .myCropper-preview .myCropper-preview-2&#39;).css(&#39;height&#39;, (previewHeight / 2) + &#39;px&#39;);
  // 设置最小预览容器的宽高
  $(&#39;.myCropper-container .myCropper-preview .myCropper-preview-3&#39;).css(&#39;width&#39;,( previewWidth / 4) + &#39;px&#39;);
  $(&#39;.myCropper-container .myCropper-preview .myCropper-preview-3&#39;).css(&#39;height&#39;, (previewHeight / 4) + &#39;px&#39;);
 },
 methods: {
  // 点击选择图片
  btnClick () {
  let _this = this;
  // 模拟input点击选择文件
  document.getElementById(&#39;myCropper-input&#39;).click();
  },
  // 选择之后的回调
  handleFile (e) {
  let _this = this;
  let inputDOM = this.$refs.inputer;
  // 通过DOM取文件数据
  _this.file = inputDOM.files[0];
  // 判断文件格式
  if (_this.imgCropperData.accept.indexOf(_this.file.type) == -1) {
   _this.$Modal.error({
   title: &#39;格式错误&#39;,
   content: &#39;您选择的图片格式不正确！&#39;
   });
   return;
  }
  // 判断文件大小限制
  if (_this.file.size > 5242880) {
   _this.$Modal.error({
   title: &#39;超出限制&#39;,
   content: &#39;您选择的图片过大，请选择5MB以内的图片！&#39;
   });
   return;
  }
  var reader = new FileReader();
  // 将图片将转成 base64 格式
  reader.readAsDataURL(_this.file);
  reader.onload = function () {
   _this.imgCropperData.imgSrc = this.result;
   _this.initCropper();
  }
  },
  // 初始化剪切
  initCropper () {
  let _this = this;
  // 初始化裁剪区域
  _this.imgObj = $(&#39;![](&#39; + _this.imgCropperData.imgSrc + &#39;)&#39;);
  let $avatarPreview = $(&#39;.avatar-preview&#39;);
  $(&#39;#myCropper-workspace&#39;).empty().html(_this.imgObj);
  _this.imgObj.cropper({
   aspectRatio: _this.proportionX / _this.proportionY,
   preview: $avatarPreview,
   crop: function(e) {
   }
  });
  _this.hasSelectImg = true;
  },
  // 确认
  crop_ok () {
  let _this = this, imgToken = null, imgBase64Data = null;
  // 判断是否选择图片
  if (_this.hasSelectImg == false) {
   _this.$Modal.error({
   title: &#39;裁剪失败&#39;,
   content: &#39;请选择图片，然后进行裁剪操作！&#39;
   });
   return false;
  }
  // 确认按钮不可用
  _this.cropperLoading = true;
  let $imgData = _this.imgObj.cropper(&#39;getCroppedCanvas&#39;)
  imgBase64Data = $imgData.toDataURL(&#39;image/png&#39;); 
  // 构造上传图片的数据
  let formData = new FormData();
  // 截取字符串
  let photoType = imgBase64Data.substring(imgBase64Data.indexOf(",") + 1);
  //进制转换
    const b64toBlob = (b64Data, contentType = &#39;&#39;, sliceSize = 512) => {
     const byteCharacters = atob(b64Data);
     const byteArrays = [];
     for(let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      const slice = byteCharacters.slice(offset, offset + sliceSize);
      const byteNumbers = new Array(slice.length);
      for(let i = 0; i < slice.length; i++) {
       byteNumbers[i] = slice.charCodeAt(i);
      }
      const byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
     }
     const blob = new Blob(byteArrays, {
      type: contentType
     });
     return blob;
  }
  const contentType = &#39;image/jepg&#39;;
    const b64Data2 = photoType;
  const blob = b64toBlob(b64Data2, contentType);
  formData.append("file", blob, "client-camera-photo.png")
  formData.append("type", _this.imgType)
  // ajax上传
  $.ajax({
     url: _this.$nfs.uploadUrl,
     method: &#39;POST&#39;,
     data: formData,
     // 默认为true，设为false后直到ajax请求结束(调完回掉函数)后才会执行$.ajax(...)后面的代码
     async: false,
     // 下面三个，因为直接使用FormData作为数据，contentType会自动设置，也不需要jquery做进一步的数据处理(序列化)。
     cache: false,
     contentType: false,
   processData: false,
   type: _this.imgType,
     success: function(res) {
   let imgToken = res.data.token;
   _this.cropperLoading = false;
   // 传参
   Bus.$emit(&#39;getTarget&#39;, imgToken); 
     },
     error: function(error) {
   _this.cropperLoading = false;
   _this.$Modal.error({
    title: &#39;系统错误&#39;,
    content: &#39;请重新裁剪图片进行上传！&#39;
   });
     }
    });
  },
 }
 }
</script>
<style lang="less" scoped>
 .myCropper-container {
 height: 400px;
 }
 .myCropper-container #myCropper-input {
 width: 0px;
 height: 0px;
 }
 .myCropper-container #myCropper-workspace {
 width: 500px;
 height: 400px;
 border: 1px solid #dddee1;
 float: left;
 }
 // 裁剪图片未选择图片的提示文字
 .myCropper-container #myCropper-workspace .myCropper-words{
 text-align: center;
 font-size: 18px;
 padding-top: 180px;
 }
 // 裁剪图片的预览区域
 .myCropper-container .myCropper-preview-long {
 width: 300px;
 }
 .myCropper-container .myCropper-preview-short {
 width: 200px;
 }
 .myCropper-container .myCropper-preview {
 float: left;
 height: 400px;
 margin-left: 10px;
 }
 .myCropper-container .myCropper-preview .myCropper-preview-1 {
 border-radius: 5px;
 overflow: hidden;
 border: 1px solid #dddee1;
 box-shadow: 3px 3px 3px #dddee1;
 img {
  width: 100%;
  height: 100%;
 }
 }
 .myCropper-container .myCropper-preview .myCropper-preview-2 {
 margin-top: 20px;
 border-radius: 5px;
 overflow: hidden;
 border: 1px solid #dddee1;
 box-shadow: 3px 3px 3px #dddee1;
 img {
  width: 100%;
  height: 100%;
 }
 }
 .myCropper-container .myCropper-preview .myCropper-preview-3 {
 margin-top: 20px;
 border-radius: 5px;
 overflow: hidden;
 border: 1px solid #dddee1;
 box-shadow: 3px 3px 3px #dddee1;
 img {
  width: 100%;
  height: 100%;
 }
 }
 // 按钮
 .myCropper-btn {
 float: left;
 margin-top: 20px;
 margin-right: 10px;
 }
</style>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to iview table render integrated switch switch

Using the better-scroll plug-in in Angular Method introduction

The above is the detailed content of Encapsulate vue based on cropper.js to implement the function of online image cropping component. For more information, please follow other related articles on the PHP Chinese website!