無(wú)標(biāo)題文章

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

??????//初始化這個(gè)裁剪框

??????var?self?=?this;

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

??????this.cropper?=?new?Cropper(image,?{

????????aspectRatio:?1,

????????viewMode:?1,

????????zoomOnWheel:false,//是否允許通過(guò)鼠標(biāo)滾輪來(lái)縮放圖片

????????background:true,//是否在容器上顯示網(wǎng)格背景

????????rotatable:true,//是否允許旋轉(zhuǎn)圖片

????????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);

????????????},

????????????//旋轉(zhuǎn)

????????????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);

????????????},

????????//點(diǎn)擊按鈕自動(dòng)執(zhí)行選擇文件事件

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

??????},

??????//剪切框?qū)捀弑?/p>

??????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';

????????//畫(huà)圓

????????//?context.beginPath();

????????//?context.arc(width?/?2,?height?/?2,?Math.min(width,?height)?/?2,?0,?2?*?Math.PI,?true);

????????//?context.fill();

????????return?canvas;

??????},

??????postImg?()?{

????????//這邊寫(xiě)圖片的上傳

????????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>

在表格中使用圖片剪裁桥胞，發(fā)現(xiàn)上下不同數(shù)據(jù)點(diǎn)擊圖片上傳加載圖片的時(shí)候會(huì)出現(xiàn)樣式串?dāng)_的問(wèn)題。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市茉兰，隨后出現(xiàn)的幾起案子崭孤，更是在濱河造成了極大的恐慌胀溺，老刑警劉巖厘唾，帶你破解...
    沈念sama閱讀 217,509評(píng)論 6贊 504
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件介杆，死亡現(xiàn)場(chǎng)離奇詭異鹃操，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)春哨，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3贊 394
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門(mén)荆隘，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人赴背，你說(shuō)我怎么就攤上這事椰拒。” “怎么了癞尚？”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,875評(píng)論 0贊 354
  • 道士緝兇錄：失蹤的賣(mài)姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)乱陡。 經(jīng)常有香客問(wèn)我浇揩，道長(zhǎng)，這世上最難降的妖魔是什么憨颠？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,441評(píng)論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任胳徽，我火速辦了婚禮，結(jié)果婚禮上爽彤，老公的妹妹穿的比我還像新娘养盗。我一直安慰自己，他們只是感情好适篙，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布往核。 她就那樣靜靜地躺著，像睡著了一般嚷节。 火紅的嫁衣襯著肌膚如雪聂儒。 梳的紋絲不亂的頭發(fā)上虎锚，一...
    開(kāi)封第一講書(shū)人閱讀 51,365評(píng)論 1贊 302
  • 城市分裂傳說(shuō)
    那天，我揣著相機(jī)與錄音衩婚，去河邊找鬼窜护。 笑死，一個(gè)胖子當(dāng)著我的面吹牛非春，可吹牛的內(nèi)容都是我干的柱徙。 我是一名探鬼主播，決...
    沈念sama閱讀 40,190評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼奇昙，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼护侮！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起敬矩，我...
    開(kāi)封第一講書(shū)人閱讀 39,062評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤概行，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后弧岳，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體凳忙，經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3贊 335
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年禽炬，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了涧卵。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1贊 347
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡腹尖，死狀恐怖柳恐，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情热幔，我是刑警寧澤乐设，帶...
    沈念sama閱讀 35,559評(píng)論 5贊 345
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站绎巨，受9級(jí)特大地震影響近尚，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜场勤，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3贊 328
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一戈锻、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧和媳，春花似錦格遭、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,779評(píng)論 0贊 22
  • 一樁弒父案拒迅，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至，卻和暖如春坪它，著一層夾襖步出監(jiān)牢的瞬間骤竹，已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,912評(píng)論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工往毡， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蒙揣，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2贊 370
  • 代替公主和親
    正文 我出身青樓开瞭，卻偏偏與公主長(zhǎng)得像懒震，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子嗤详，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2贊 354

推薦閱讀更多精彩內(nèi)容