无标题文章

<template>

    <div id="photoTwo">

      <!-- 遮罩层 -->

      <div class="father" v-show="panel">

            <div class="containerTwo">

                <div id="cropper" style="margin-top:1%;margin-left: 1%;margin-right: 1%;height: 85%;margin-bottom: 1%;padding:1px;">

                    <img id="imageTwo" :src="url" alt="Picture">

                </div>

                <div>

                    <div style="float:right;margin-right:1%;">

                        <select v-model="aspectRatioSelect" @change="aspectRatio(aspectRatioSelect)" size="mini" class="aspect" style="width: 80px">

                            <option :label="'1/2'" :value="0.5"></option>

                            <option :label="'1/1'" :value="1"></option>

                            <option :label="'3/2'" :value="1.5"></option>

                            <option :label="'2/1'" :value="2"></option>

                            <option :label="'5/2'" :value="2.5"></option>

                            <option :label="'3/1'" :value="3"></option>

                        </select>

                        <el-button icon="el-icon-zoom-out" @click="zoom(-1)" size="mini" circle></el-button>

                        <el-button icon="el-icon-zoom-in" @click="zoom(1)" size="mini" circle></el-button>

                        <el-button icon="el-icon-refresh" @click="rotate" size="mini" circle></el-button>

                        <el-button type="success" icon="el-icon-check" @click="crop2" size="mini" circle></el-button>

                        <el-button type="danger" icon="el-icon-close" @click="cancelPanel" size="mini" circle></el-button>

                    </div>

                </div>

            </div>

        </div>

      <div>

        <div>

          <input type="file" id="changeTwo" accept=".jpg,.jpeg,.gif,.png,.bmp" @change="changeTwo"  style="display:none;">

          <div  class="show"

                  v-on:mouseover="addClassload()"

                  v-on:mouseout="removeClassload()"

                  @click="upload()"

                  :style="'backgroundImage:url('+headerImageTwo+');border: 1px dashed '+color">

                <i class="el-icon-plus i" :style="'color: '+color"></i>

            </div>

        </div>

      </div>

    </div>

</template>


<script>

  import Cropper from 'cropperjs';

  export default {

    props:['headerImageTwo'],

    components: {


    },

    data () {

      return {

        picValue:'',

        cropper:'',

        aspectRatioSelect:1,

        croppable:false,

        panel:false,

        url:null,

        current:0,

        color:"#d9d9d9"

      }

    },

    mounted () {

      //初始化这个裁剪框

      var self = this;

      var image = document.getElementById('imageTwo');

      this.cropper = new Cropper(image, {

        aspectRatio: 1,

        viewMode: 1,

        zoomOnWheel:false,//是否允许通过鼠标滚轮来缩放图片

        background:true,//是否在容器上显示网格背景

        rotatable:true,//是否允许旋转图片

        ready: function () {

          self.croppable = true;

        }

      });

    },

    methods: {

        addClassload(bool){

                this. color="#1b95e0"

            },

            removeClassload(bool){

                this. color="#d9d9d9"

            },

            //缩放

            zoom(num){

                num = num || 1;

                this.cropper.zoom(num);

            },

            //旋转

            rotate(){

                this.current = (this.current+90)%360;

                this.cropper.rotate(this.current);

            },

            crop2 () {             

                var croppedCanvas;

                var roundedCanvas;

                if (!this.croppable) {

                    return;

                }

                // Crop

                croppedCanvas = this.cropper.getCroppedCanvas();

                //方形

                var picBase=croppedCanvas.toDataURL();               

                this.$emit("changeHeaderImage",picBase);

                var  gettype=Object.prototype.toString;

                this.url="";

                this.panel = false;

                this.$emit('handleAvatarSuccess',picBase);

            },

        //点击按钮自动执行选择文件事件

            upload(bool){

                this.url=null;

                this.current=0;

                this.aspectRatio(this.aspectRatioSelect=1);

                document.getElementById("changeTwo").value=null;

                document.getElementById("changeTwo").click();

            },

            cancelPanel(){

              this.url=null;

              this.panel=false;

            },

      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 ;

      },

      //剪切框宽高比

      aspectRatio(num){

        this.cropper.setAspectRatio(num);

        },

      changeTwo (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);

        }

      },

      sureimg () {

        var self=this;

        this.panel = false;

        var croppedCanvas;

        var roundedCanvas;

        if (!this.croppable) {

          return;

        }    

      },

      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 () {

        //这边写图片的上传

        this.$emit('imgfile', this.headerImageTwo);


      }

    }

  }

</script>


<style scoped>

 *{

        margin: 0;

        padding: 0;

    }

    #photoTwo .father{

        background-color: rgba(0,0,0,0.5);

        position: fixed;

        left:0px;

        top:0px;

        width:100%;

        height:100%;

        z-index: 33;

    }

    #photoTwo .i{

        font-size: 28px;

        color: #8c939d;

        width: 120px;

        height: 120px;

        line-height: 120px;

        text-align: center;

    }

    #photoTwo .show {

        border: 1px dashed #d9d9d9;

        border-radius: 10%;

        width: 120px;

        height: 120px;

        cursor: pointer;

        position: relative;

        overflow: hidden;

        display: inline-block;

        text-align: center;

        outline: none;

        background-position: center center;

        background-repeat: no-repeat;

        background-size: cover;

    }

    #photoTwo .containerTwo {

        z-index: 99;

        height: 300px;

        width: 500px;

        position: fixed;

        /*padding-top: 60px;*/

        left: 35%;

        top: 20%;

        background-color: white;

    }

    #photoTwo #imageTwo {

        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

    }

    .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;

    }

    .aspect input{

        width: 100%;

        height: 28px;

    }


</style>

在表格中使用图片剪裁，发现上下不同数据点击图片上传加载图片的时候会出现样式串扰的问题。

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

推荐阅读更多精彩内容