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

之前写了一个上传头像的功能模块,以下的内容是描述上传头像过程中裁剪图片插件结合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/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;
} 

</style> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue.js 上传图片实例代码

    最近爱上了用vue.js做前端,昨天用vue上传图片时遇到了问题,最后半天时间终于摸索出来,我将相关部分的代码贴出来. 前端部分 <div class="form-group"> <label>背景图</label> <input type="file" class="form-control" @change="onFileChange"> </div> <d

  • vue实现移动端图片裁剪上传功能

    本文实例为大家分享了vue移动端图片裁剪上传的具体代码,供大家参考,具体内容如下 1. 安装cropperjs依赖库 npm install cropperjs 2. 编写组件SimpleCropper.vue <template> <div class="v-simple-cropper"> <slot> <button @click="upload">上传图片</button> </slot>

  • 基于VUE选择上传图片并页面显示(图片可删除)

    基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件:jqueryform HTML文本内容: <template> <div id="accident"> <div class="wrapper"> <i class="icon-pic"></i>相关照片 <button type="button" @click="

  • require.js+vue开发微信上传图片组件

    由于项目是thinkPHP做后端框架,一直以来都是多页面的后端路由,想使用火热的webpack有点无从下手(原谅我太菜,而且推广vue只有我一个人--),没办法,想把vue用起来,唯有在原来的基础上改进.使用webpack的巨大好处就是可以使用 .vue 这样的单文件来写vue组件,这样每一个组件就是一个 .vue 文件,哪里用上这个组件就引入进来,维护起来确实很爽.然而一直以来项目用的都是require.js,那又想以这样的形式来组织vue组件,还要加上vue-router和vue-resou

  • vue中用H5实现文件上传的方法实例代码

    整理文档,搜刮出一个vue中用H5实现文件上传的方法实例代码,稍微整理精简一下做下分享. 1.图片上传 <img v-if="personInfo.photoUrl" :src="headPreFix + personInfo.photoUrl" style="height:126px;max-width:133px;margin: 25px 0;"> <img v-else src="../../assets/def

  • Vue axios 中提交表单数据(含上传文件)

    我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport

  • Vue.js 2.0 移动端拍照压缩图片上传预览功能

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • vue移动端裁剪图片结合插件Cropper的使用实例代码

    之前写了一个上传头像的功能模块,以下的内容是描述上传头像过程中裁剪图片插件结合vue的一个使用. 当然,使用就安装 npm install cropperjs 接着再引入 import Cropper from 'cropperjs' 下面是源码 <template> <div id="demo"> <!-- 遮罩层 --> <div class="container" v-show="panel">

  • vue移动端微信授权登录插件封装的实例

    1.新建wechatAuth.js文件 const queryString = require('query-string') //应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称.性别.所在地.并且,即使在未关注的情况下,只要用户授权,也能获取其信息) const SCOPES = ['snsapi_base', 'snsapi_userinfo'] class VueWe

  • Vue移动端实现图片上传及超过1M压缩上传

    本文实例为大家分享了Vue移动端实现图片上传及超过1M压缩上传的具体代码,供大家参考,具体内容如下 1.实现效果 2.代码 Html: <div class="choosePic"> <div class="pics" :style="{backgroundImage: 'url(' + form.erpRecords + ')'}"> <input type="file" class="

  • vue下canvas裁剪图片实例讲解

    由于时间关系 代码没有做整理大家有什么不懂得可以留言: 代码的主题思路备注中都有 大家可以看看 我的博客中还有关于canvas绘制矩形的文章有需要的可以看一下: HTML代码: 第一行的canvas为裁剪后展示用:div中的canvas存放原有尺寸的图片 <canvas id="canvasImg1" style=" position: absolute; margin: 2px 0 0 0"></canvas> <div id=&qu

  • vue服务端渲染页面缓存和组件缓存的实例详解

    vue缓存分为页面缓存.组建缓存.接口缓存,这里我主要说到了页面缓存和组建缓存 页面缓存: 在server.js中设置 const LRU = require('lru-cache') const microCache = LRU({ max: 100, // 最大缓存的数目 maxAge: 1000 // 重要提示:条目在 1 秒后过期. }) const isCacheable = req => { //判断是否需要页面缓存 if (req.url && req.url ===

  • vue移动端项目中如何实现页面缓存的示例代码

    背景 在移动端中,页面跳转之间的缓存是必备的一个需求. 例如:首页=>列表页=>详情页. 从首页进入列表页,列表页需要刷新,而从详情页返回列表页,列表页则需要保持页面缓存. 对于首页,一般我们都会让其一直保持缓存的状态. 对于详情页,不管从哪个入口进入,都会让其重新刷新. 实现思路 说到页面缓存,在vue中那就不得不提keep-alive组件了,keep-alive提供了路由缓存功能,本文主要基于它和vuex来实现应用里的页面跳转缓存. vuex里维护一个数组cachePages,用以保存当前

  • webuploader 实现图片批量上传功能附实例代码

    1.导入资源 2.JSP代码 <div class="page-container"> <div class="row cl"> <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>项目名称:</label> <div class="formCont

  • vue+mockjs模拟数据实现前后端分离开发的实例代码

    本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码,分享给大家,也给自己留个笔记. 在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回

  • android中图片加载到内存的实例代码

    本文演示android中图片加载到内存 首先设计界面: 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="matc

  • Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果(实例代码)

    自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScrollView可以想ViewPager一样,既可以绑定数据集(动态改变图片),还能做到,不管多少图片都不会OOM(ViewPager内

随机推荐