veu2结合cropper.js用Django REST framework写API接口实现剪图上传

11.png

12.png

<template>
<div id="upimg">
<div class="dialog-wrapper" @click="onClose" v-show="panel"></div>
<transition name="drop">
<div class="dialog-container" v-show="panel">
<div class="" style="height:100%;width:100%;">
<img id="image" :src="url" alt="图片" >
</div>
<div style="width:100%;height:6%;border-radius:0px 0px 5px 5px;background:#fff">
<span class="close-btn" @click="crop">确定上传</span>
<span class="close-btn" @click="onClose">关闭</span>
</div>
</div>
</transition>

<div style="display:flex;">

<div style="
width: 58px;
height: 58px;
margin-right:10px;
overflow: hidden;
position: relative;
border-radius: 50%;
border: 1px solid #d5d5d5;" v-if="userbasic.headPhoto">
<img :src="userbasic.headPhoto" alt="" style="width:58px;height:58px">
</div>
<div class="" v-else>

</div>
<div style="width: 58px;height:58px;line-height: 58px;text-align:center;border:1px dashed rgba(0, 0, 0, .2);position:relative;">
  <Icon type="camera" size="20"></Icon>
  <input type="file" name="message_img" size="45" style="left:-10px;opacity:0;overflow:hidden;position:absolute" @change="change">
</div>
<!-- <button type="button" name="button" @change="preview">保存</button> -->

</div>
</div>
</template>
<script>
import {
getUserInfoData,
updateUserBasic,
postUserBasic,
} from '../api/api'
import Cropper from 'cropperjs'
export default {
data() {
return {
picValue: '',
cropper: '',
croppable: false,
panel: false,
url: '',

  userdata: '',
  userbasic: '',
}

},
created() {
this.setUserInfoData();
},
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: {
onClose(){
this.panel = !this.panel;
},
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;

  this.image = e.target.files[0]; //新加的获取文件资源
},
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.userbasic.headPhoto = 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;
},
//用户个人头像
setUserInfoData() {
  getUserInfoData().then(response => {
    this.userdata = response.data;
    if (this.userdata.basic) {
      this.userbasic = this.userdata.basic;
    }
  }).catch(error => {
    return
  });
},

postImg() {
  //这边写图片的上传
  const formData = new FormData();
  // 截取字符串crop中this.userbasic.headPhoto = roundedCanvas.toDataURL();
  let photoType = this.userbasic.headPhoto.substring(this.userbasic.headPhoto.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 = 'image/jpeg';
  const b64Data2 = photoType;
  const blob = b64toBlob(b64Data2, contentType);
   
    // name.jpg可修改
  formData.append('headPhoto', blob,"name.jpg");

  if (this.userbasic.id) {
    updateUserBasic(Number(this.userbasic.id), formData).then(response => {
      alert('修改成功');
    }).catch(error => {
      // console.log(error);
    });
  } else {
    postUserBasic(formData).then(response => {
      alert('提交成功');
    }).catch(error => {
      //  console.log(error);
      
    })
  }
}

}
}
</script>

<style>

  • {
    margin: 0;
    padding: 0;
    }

upimg .dialog-wrapper {

position: fixed;
height: 100%;
width: 100%;
z-index: 5;
background-color: #000;
opacity: .8;
}

upimg .dialog-container {

position: fixed;
z-index: 80;
top: 80px;
left: 25%;
width: 50%;
height: 60%;
background-color:#fff;
border-radius: 5px 5px 0px 0px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}

upimg .close-btn {

padding: 5px 10px;
float: right;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}

  • Cropper.js
  • https://github.com/fengyuanchen/cropperjs
    /
    .cropper-view-box,
    .cropper-face {
    /    此处设置剪图范围/
    /    border-radius: 50%;*/
    }
    .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 {
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>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,378评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,356评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,702评论 0赞 342
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,259评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,263评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,036评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,349评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,979评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,469评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,703评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,257评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2赞 345