vue移动端裁剪图片结合插件Cropper的使用

最新推荐文章于 2024-03-31 09:30:55 发布
最新推荐文章于 2024-03-31 09:30:55 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： vue项目 文章标签： vue cropper 图片剪裁

原文地址
http://blog.csdn.net/xiaogezl/article/details/70227025

之前写了一个上传头像的功能模块，以下的内容是描述上传头像过程中裁剪图片插件结合vue的一个使用。
当然，使用就安装 npm install cropperjs
接着再引入 import Cropper from ‘cropperjs’
下面是源码

<template>  
  <div id="demo">  
    <!-- 遮罩层 -->  
    <div class="container" v-show="panel">  
      <div>  
        <img id="image" :src="url" alt="Picture">  
      </div>  

      <button type="button" id="button" @click="crop">确定</button>  

    </div>  

    <div style="padding:20px;">  
        <div class="show">  
          <div class="picture" :style="'backgroundImage:url('+headerImage+')'">  
          </div>  
        </div>  
        <div style="margin-top:20px;">  
          <input type="file" id="change" accept="image" @change="change">  
          <label for="change"></label>  
        </div>  

    </div>  
  </div>  
</template>  

<script>  
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 () {  
      //这边写图片的上传  
    }  
  }  
}  
</script>  

<style>  
*{  
  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 <= -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/gAAAABlBMVEXMzMzTjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+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;  
}  


</style>
HaiJing1995
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-croppa：适用于Vue 2.0的简单易懂的可自定义移动友好型图像裁剪器
02-06
Vue-croppa 适用于Vue 2.0的简单易用的可自定义移动友好型图像裁剪器。 产品特点 直截了当：所见即所得 高度可定制：您几乎可以自定义除核心功能以外的任何内容 移动友好：支持拖动移动并用两根手指捏住以放大移动设备 EXIF方向：v0.2.0 +支持以EXIF方向正确显示图像 浏览器支持 IE 10以上 Firefox 3.6以上版本 Chrome6+ Safari 6+ 歌剧11.5+ iOS Safari 6.1+ Android浏览器3+ 范本范例 < croppa v-model =" myCroppa " :width =" 400 "
vue移动端裁剪图片结合插件Cropper的使用实例代码
08-30
本篇文章主要介绍了vue移动端裁剪图片结合插件Cropper的使用实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 移动端头像裁剪_vue移动端裁剪图片结合插件Cropper的使用实例代码
weixin_42530732的博客
02-22 457
vue移动端裁剪图片结合插件Cropper的使用实例代码2019-01-07编程之家收集整理的这篇文章主要介绍了vue移动端裁剪图片结合插件Cropper的使用实例代码，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。导读热词之前写了一个上传头像的功能模块，以下的内容是描述上传头像过程中裁剪图片插件结合vue的一个使用。当然，使用就安装 npm install cropperjs接着再...
Vue-PicZoom：一款优雅的图片缩放组件
最新发布
gitblog_00058的博客
03-31 436
Vue-PicZoom：一款优雅的图片缩放组件 项目地址:https://gitcode.com/826327700/vue-piczoom Vue-PicZoom 是一个基于 Vue.js 的轻量级图片缩放插件，专为提升用户体验而设计，特别是在需要查看详细图像信息的场景中。它允许用户通过简单的手势或者鼠标操作来放大和缩小图片，使得在网页上查看细节变得简单易行。 技术解析 Vue-PicZoom ...
Vue2 vue-cropper裁剪图片-使用方法及注意事项
MyOxygen的博客
06-06 2181
记录vue-cropper的使用及过程中遇到的问题
vue-cropper插件使用
热门推荐
aizenmoxiguan的博客
12-03 2万+
vue-cropper插件使用（vue2)
基于vue的图片剪裁工具vue-croppe
lhz_19的博客
09-29 1179
基于vue的图片剪裁工具vue-croppe 安装 // npm安装 npm install --save vue-croppa // yarn 安装 yarn add vue-croppa 使用 引入插件 两种引用方式 // 全局注册 main.js import VueCropper from 'vue-cropper' Vue.use(VueCropper) // 组件内单独使用 userAvatar.vue import { VueCropper } from 'vue-cropper'
vue+cropper+vux 移动端图片裁剪
01-21
vue+cropper+vux 移动端图片裁剪 刚好项目需要用到图片裁剪功能
基于Vue的移动端图片裁剪组件功能
08-28
给大家介绍了基于Vue的移动端图片裁剪组件功能，因为移动端是用vue，所以就写成了一个vue组件，下面就说说自己的一些实现思路,需要的朋友可以参考下
vue实现移动端图片裁剪上传功能
01-21
本文实例为大家分享了vue移动端图片裁剪上传的具体代码，供大家参考，具体内容如下 1.安装cropperjs依赖库 npm install cropperjs 2.编写组件SimpleCropper.vue <div class=v-simple-cropper> <button @...
vue-cropper实战使用
weixin_44901028的博客
02-15 757
一个优雅的图片裁剪插件。
vueimgcropper基于Vue的移动端图片裁剪组件
08-10
vue-img-cropper ---基于Vue的移动端图片裁剪组件
VUE中使用vue-cropper实现图片裁剪，及问题总结
weixin_69580737的博客
07-07 7320
template><el-dialogtitle="裁切封面"/></div></div>--预览效果图--></div></div></div><el-button icon="el-icon-plus" @click="scaleBigger">放大</el-button><el-button icon="el-icon-minus" @click="scaleSmaller">缩小</el-button>
vue-croppa图片剪辑器
前端小白的进击
11-25 763
npm安装 npm install --save vue-croppa main.js引入文件 import Croppa from "vue-croppa"; import "vue-croppa/dist/vue-croppa.css"; Vue.use(Croppa); 具体应用 页面使用了XModal消息模态框，具体见我的另一篇博客：XModal消息模态框 <t...
【多个图片合成一张图片】vue简单实现多张图片合并成一张图并下载图片功能，html2canvas下载图片跨域问题解决【详细注释，复制即用】
seeeeeeeeeee的博客
10-10 5859
最近接到的一个小需求，是需要两个图片合成一张图片然后可以下载下来变成一张完整的图的我就在网上看了下，发现html2canvas可以完成这个功能那就做一个小案例记录一下这个功能，以前还没做过呢。以后再用到可以直接复制了。
史上最全基于vue的图片裁剪vue-cropper使用
神尐破
08-09 1828
遇到一个图片裁剪的需求，对于一个前端小白的我来说，搞这些花里胡哨的东西，走了很多弯路，各种百度，改了又改，实则不易啊。
基于Vue的移动端图片裁剪组件 vue-crop
贵林之恋的博客
11-19 2068
基于Vue的移动端图片裁剪组件 vue-crop 最近公司做一个移动端的项目，前端用的是vue + vant，需求：上传证件照，需要裁剪图片，vant 的上传组件满足不了，所以自己上手开发一个。 图片： 是由https://blog.csdn.net/ch834301/article/details/79963152这个修改而来的，已经修改成了在单独的组件可以用了，详情请看前面的链接。 代码如下： <template> <div class="zyg-uploa..
指定类型和坐标系的海报合成图片vue-canvas-poster
热爱学习_小强的博客
02-24 683
该插件的优点如下：使用npm安装，简单易懂，功能强大，可以设置widthPixels设定图片尺寸，解决图片模糊问题 功能特点： 绘制文本(换行、超出内容省略号、中划线、下划线、文本加粗、文字缩进) 绘制图片(圆角、旋转、边框、模式:类似小程序 image mode) 绘制矩形(圆角、旋转、边框) 绘制二维码 渐变，阴影 版本安装： cnpm i vue-canvas-poster --save 备注：安装1....
关联上文 vue 移动端 如何使用这些插件
05-20
好的，关于Vue移动端如何使用这些插件，可以按照以下步骤进行： 1. 在Vue项目中安装需要使用的插件，可以使用npm或者yarn来安装。例如，如果要安装vant组件库，可以执行以下命令： ``` npm install vant --save ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值