今天产品提了一个需求，要求用户上传图片进行剪切，上网搜了一下 cropperjs 挺不错，官网api不怎么看得懂，记录一下使用方法

2021-01-27 00:12

阅读：559

标签：样式判断 gre site move img append ati inner

我使用的是vue，移动端的项目。

官网地址：cropperjs

GitHub地址：https://github.com/fengyuanchen/cropperjs/blob/master/README.md

先看效果图，不然没有吸引力啊！！哈哈

技术图片

这里只记录使用方法，至于怎么实现和要修改一些参数，大家前往官网api了解。

首先我们先安装 npm install cropperjs exif-js

新建一个文件存放cropperjs 处理图片的方法（我放到了 static 文件下的 clipper.js 文件下了）

import Cropper from ‘cropperjs‘
import Exif from ‘exif-js‘
export default {
  install( Vue ){
    //初始化方法
    Vue.prototype.initilize = function( opt ){
      let self = this;
      this.options = opt;
      //创建dom
      this.createElement();
      this.resultObj = opt.resultObj;
      //初始化裁剪对象
      this.cropper = new Cropper( this.preview , {
        aspectRatio : opt.aspectRatio || 1 ,
        autoCropArea : opt.autoCropArea || 0.8 ,
        viewMode : 1,
        guides : opt.aspectRatio == ‘Free‘ ? false : true ,
        cropBoxResizable : opt.aspectRatio == ‘Free‘ ? false : true ,
        cropBoxMovable : opt.aspectRatio == ‘Free‘ ? false : true ,
        dragCrop : opt.aspectRatio == ‘Free‘ ? false : true ,
        background : false,
        checkOrientation : true ,
        checkCrossOrigin : true ,
        zoomable : false,
        zoomOnWheel : false ,
        center : false ,
        toggleDragModeOnDblclick : false ,
        ready : function () {
          // console.log(self.cropper.rotate(90))
          if( opt.aspectRatio == ‘Free‘ ){
            let cropBox = self.cropper.cropBox;
            cropBox.querySelector(‘span.cropper-view-box‘).style.outline = ‘none‘;
            self.cropper.disable();
          }
        }
      });
    }
    //创建一些必要的DOM，用于图片裁剪
    Vue.prototype.createElement = function () {
      //初始化图片为空对象
      this.preview = null;

      let str = ‘
‘;
      str+= ‘
图片上传中
‘;
      str+= ‘上传成功

‘; let body = document.getElementsByTagName(‘body‘)[0]; this.reagion = document.createElement(‘div‘); this.reagion.id = ‘clip_container‘; this.reagion.className = ‘container‘; this.reagion.innerHTML = str; //添加创建好的DOM元素 body.appendChild(this.reagion); this.preview = document.getElementById(‘clip_image‘); //绑定一些方法 this.initFunction(); } //初始化一些函数绑定 Vue.prototype.initFunction = function () { let self =this; this.clickBtn = document.getElementById(‘clip_button‘); this.cancelBtn = document.getElementById(‘cancel_clip‘); //确定事件 this.addEvent( this.clickBtn , ‘click‘ , function () { self.crop(); }) //取消事件 this.addEvent( this.cancelBtn , ‘click‘ , function () { self.destoried(); }) //清空input的值 this.addEvent( this.fileObj , ‘click‘ , function () { this.value = ‘‘; }) } //外部接口，用于input[‘file‘]对象change时的调用 Vue.prototype.clip = function ( e , opt ) { let self = this; this.fileObj = e.srcElement; let files = e.target.files || e.dataTransfer.files; if (!files.length) return false; //不是图片直接返回 //调用初始化方法 this.initilize( opt ); //获取图片文件资源 this.picValue = files[0]; //去获取拍照时的信息，解决拍出来的照片旋转问题 // Exif.getData( files[0] , function(){ // self.Orientation = Exif.getTag( files[0], ‘Orientation‘); // console.log(self.Orientation) // }); //调用方法转成url格式 this.originUrl = this.getObjectURL( this.picValue ); //每次替换图片要重新得到新的url if(this.cropper){ this.cropper.replace(this.originUrl); } } //图片转码方法 Vue.prototype.getObjectURL = function(file) { let 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 ; } //点击确定进行裁剪 Vue.prototype.crop = function () { let self = this; let image = new Image(); let croppedCanvas; let roundedCanvas; // Crop document.querySelector(‘.crop_loading‘).style.display = ‘block‘; setTimeout(function () { croppedCanvas = self.cropper.getCroppedCanvas(); // Round roundedCanvas = self.getRoundedCanvas(croppedCanvas); let imgData = roundedCanvas.toDataURL(); image.src = imgData; //判断图片是否大于100k,不大于直接上传，反之压缩 if( imgData.length max_step && (step = min_step); } else { step--; step 1) { console.log("大于400万像素") ratio = Math.sqrt(ratio); width /= ratio; height /= ratio; } else { ratio = 1; } canvas.width = width; canvas.height = height; // 铺底色 ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); //如果图片像素大于100万则使用瓦片绘制 let count; if ((count = width * height / 1000000) > 1) { count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片 // 计算每块瓦片的宽和高 let nw = ~~(width / count); let nh = ~~(height / count); tCanvas.width = nw; tCanvas.height = nh; for (let i = 0; i

在main中引入clipper文件，调用vue,use(clipper)方法使用

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import clipper from ‘../static/clipper‘

Vue.config.productionTip = false

Vue.use(clipper)

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  template: ‘App/>‘,
  components: { App }
})

组件中调用clipper.js中的方法

然后加上剪切页面的样式，可以放在app.vue中

#clip_button {
  position: absolute;
  right: 10%;
  bottom: 20px;
  width: 80px;
  height: 40px;
  border:none;
  border-radius: 2px;
  background: #1AAD19;
  color: #fff;
}
#cancel_clip{
  position: absolute;
  left: 10%;
  bottom: 20px;
  width: 80px;
  height: 40px;
  border:none;
  border-radius: 2px;
  color: #fff;
  background:#E64340;
}
#clip_container.container {
  z-index: 99;
  position: fixed;
  padding-top: 60px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background:rgba(0,0,0,1);
}
#clip_container.container > div{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
#clip_image {
  max-width: 100%;
}

.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
}
.crop_loading , .crop_success {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}
.crop_loading .crop_content{
  position: absolute;
  top: 50% ;
  left: 50%;
  text-align: center;
  background: #000;
  opacity: 0.9;
  height: 100px;
  width: 100px;
  vertical-align: middle;
  color: #fff;
  padding-top: 20px;
  font-size: 16px;
  -webkit-border-radius:3px;
  border-radius:3px;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.crop_loading .crop_content img{
  margin-top: 15px;
  margin-bottom: 10px;
}
.crop_success .crop_success_text{
  position: absolute;
  top: 50% ;
  left: 50%;
  text-align: center;
  background: #000;
  opacity: 0.9;
  width: 120px;
  height: 30px;
  color: #fff;
  line-height: 30px;
  font-size: 16px;
  -webkit-border-radius:3px;
  border-radius:3px;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.cropper-container img {
  /* Avoid margin top issue (Occur only when margin-top = -height) */
  display: block;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100%;
  height: 100%;
  image-orientation: 0deg
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.cropper-wrap-box {
  overflow: hidden;
}

.cropper-drag-box {
  opacity: 0;
  background-color: #fff;
}

.cropper-modal {
  opacity: .5;
  background-color: #000;
}

.cropper-view-box {
  display: block;
  overflow: hidden;

  width: 100%;
  height: 100%;

  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
}

.cropper-dashed {
  position: absolute;

  display: block;

  opacity: .5;
  border: 0 dashed #eee
}

.cropper-dashed.dashed-h {
  top: 33.33333%;
  left: 0;
  width: 100%;
  height: 33.33333%;
  border-top-width: 1px;
  border-bottom-width: 1px
}

.cropper-dashed.dashed-v {
  top: 0;
  left: 33.33333%;
  width: 33.33333%;
  height: 100%;
  border-right-width: 1px;
  border-left-width: 1px
}

.cropper-center {
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;

  width: 0;
  height: 0;

  opacity: .75
}

.cropper-center:before,
.cropper-center:after {
  position: absolute;
  display: block;
  content: ‘ ‘;
  background-color: #eee
}

.cropper-center:before {
  top: 0;
  left: -3px;
  width: 7px;
  height: 1px
}

.cropper-center:after {
  top: -3px;
  left: 0;
  width: 1px;
  height: 7px
}

.cropper-face,
.cropper-line,
.cropper-point {
  position: absolute;

  display: block;

  width: 100%;
  height: 100%;

  opacity: .1;
}

.cropper-face {
  top: 0;
  left: 0;

  background-color: #fff;
}

.cropper-line {
  background-color: #39f
}

.cropper-line.line-e {
  top: 0;
  right: -3px;
  width: 5px;
  cursor: e-resize
}

.cropper-line.line-n {
  top: -3px;
  left: 0;
  height: 5px;
  cursor: n-resize
}

.cropper-line.line-w {
  top: 0;
  left: -3px;
  width: 5px;
  cursor: w-resize
}

.cropper-line.line-s {
  bottom: -3px;
  left: 0;
  height: 5px;
  cursor: s-resize
}

.cropper-point {
  width: 5px;
  height: 5px;

  opacity: .75;
  background-color: #39f
}

.cropper-point.point-e {
  top: 50%;
  right: -3px;
  margin-top: -3px;
  cursor: e-resize
}

.cropper-point.point-n {
  top: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: n-resize
}

.cropper-point.point-w {
  top: 50%;
  left: -3px;
  margin-top: -3px;
  cursor: w-resize
}

.cropper-point.point-s {
  bottom: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: s-resize
}

.cropper-point.point-ne {
  top: -3px;
  right: -3px;
  cursor: ne-resize
}

.cropper-point.point-nw {
  top: -3px;
  left: -3px;
  cursor: nw-resize
}

.cropper-point.point-sw {
  bottom: -3px;
  left: -3px;
  cursor: sw-resize
}

.cropper-point.point-se {
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  cursor: se-resize;
  opacity: 1
}

@media (min-width: 768px) {

  .cropper-point.point-se {
    width: 15px;
    height: 15px
  }
}

@media (min-width: 992px) {

  .cropper-point.point-se {
    width: 10px;
    height: 10px
  }
}

@media (min-width: 1200px) {

  .cropper-point.point-se {
    width: 5px;
    height: 5px;
    opacity: .75
  }
}

.cropper-point.point-se:before {
  position: absolute;
  right: -50%;
  bottom: -50%;
  display: block;
  width: 200%;
  height: 200%;
  content: ‘ ‘;
  opacity: 0;
  background-color: #39f
}

.cropper-invisible {
  opacity: 0;
}

.cropper-bg {
  background-image: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC‘);
}

.cropper-hide {
  position: absolute;

  display: block;

  width: 0;
  height: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

恭喜你又成功，搬运了一次代码！！！

clipper

今天产品提了一个需求，要求用户上传图片进行剪切，上网搜了一下 cropperjs 挺不错，官网api不怎么看得懂，记录一下使用方法

标签：样式判断 gre site move img append ati inner

原文地址：https://www.cnblogs.com/liangziaha/p/11962061.html

上一篇：使用Duilib开发Windows软件（2）——控件

下一篇：Windows10+Anaconda+PyTorch(cpu版本)环境搭建

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：今天产品提了一个需求，要求用户上传图片进行剪切，上网搜了一下 cropperjs 挺不错，官网api不怎么看得懂，记录一下使用方法
文章链接：http://soscw.com/index.php/essay/47498.html

亲，登录后才可以留言！

今天产品提了一个需求，要求用户上传图片进行剪切，上网搜了一下 cropperjs 挺不错，官网api不怎么看得懂，记录一下使用方法

评论

热门文章

推荐文章

最新文章

置顶文章