您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)javascript怎么實現(xiàn)自由編輯圖片功能,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
當(dāng)下我們項目中需要一個可自由編輯圖片的功能,當(dāng)圖片可能出現(xiàn)需要頻繁編輯,同時能滿足發(fā)現(xiàn)裁剪不滿意想要微調(diào)的時候,會發(fā)現(xiàn)如果我們處理圖片按照平常的習(xí)慣,如裁剪后上傳服務(wù)器或者轉(zhuǎn)base64,都是不符合需求的。那么該怎么處理比較好呢?如何以盡量少的網(wǎng)絡(luò)請求、少占用存儲來解決應(yīng)用場景呢?那么,便想到了只用純數(shù)據(jù)來跟我們的功能打交道。
先安利個裁圖神器cropperjs,個人認(rèn)為是個易上手,配置和api方法蠻齊全的一個組件庫。
項目內(nèi)引入,一定不要漏了引用樣式
import Cropper from 'cropperjs'; import 'cropperjs/dist/cropper.css';
這里我們以react為例
this.state = { width: 640, //圖片展示寬 height: 360, //圖片展示高 imgWidth: 640, //圖片實際寬 imgHeight: 360, //圖片實際高 imgLeft: 0, //圖片左偏移 imgTop: 0, //圖片上偏移 editing: false //是否編輯中 } //展示圖片的基本dom結(jié)構(gòu),我們使用外div內(nèi)img的形式,來跟數(shù)據(jù)結(jié)合控制裁剪圖片的展示 const { width, height, imgWidth, imgHeight, imgLeft, imgTop, editing } = this.state; const containerStyle = { width: `${width}px`, height: `${height}px` } const imgStyle = { width: `${imgWidth}px`, height: `${imgHeight}px`, left: `${imgLeft}px`, top: `${imgTop}px` } .img-container { overflow: hidden; position: relative; } .crop-img { position: absolute; left: 0; top: 0; } <div className="img-container" style={containerStyle} > <img className="crop-img" src={picture} style={imgStyle} alt="pic" ></img> </div>
簡單來說就是外層元素控制裁剪展示的寬高,同時根據(jù)項目需求的元素定位也掛在這,內(nèi)部img掛載圖片實際大小和偏移。
cropperjs初始化后的元素,是會與初始化對象img處在同一dom層級,也就是說如果我們直接對展示img進(jìn)行初始化的話,編輯區(qū)域展示將會受父元素,如圖,放大圖片時候會不方查看超出部分
所以在這里,為了圖片編輯的自由度,建議分開展示dom與用以初始化cropper對象的dom,在這里編輯區(qū)域為全屏幕為例,根據(jù)項目實際功能區(qū)域進(jìn)行調(diào)整
.edit-container { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } <div className="img-container" style={containerStyle} > <img className="crop-img" src={picture} style={imgStyle} alt="pic" ></img> </div> //cropper初始化 this.myRef = React.createRef(); this.myCropper = new Cropper(this.myRef.current, options); //options配置 const options = { dragMode: 'move', //使裁剪時圖片可拖動 background: false, //因為我們現(xiàn)在是全屏可編輯,需要隱藏掉默認(rèn)的背景 } //當(dāng)然還有許多常見的配置項,如編輯框尺寸比例等,大家可自行查看api //裁剪保存 save() { const cropBoxData = this.myCropper.getCropBoxData(); //獲取裁剪框數(shù)據(jù) const canvasData = this.myCropper.getCanvasData(); //獲取圖片數(shù)據(jù) this.setState({ width: cropBoxData.width, height: cropBoxData.height, imgLeft: canvasData.left - cropBoxData.left, imgTop: canvasData.top - cropBoxData.top, imgWidth: canvasData.width, imgHeight: canvasData.height }) }
這樣的話 我們就可以完全在自定義的全屏內(nèi)編輯,保存效果如下,到這里我們就完成了第一部分功能,裁剪并保存數(shù)據(jù)和展示
重點介紹下我們用到的兩個api方法getCropBoxData和getCanvasData,getCanvasData是用來獲取圖片的實際數(shù)據(jù)的(當(dāng)前的寬高,和相對于父元素可視區(qū)域的位移偏移量),getCropBoxData則是獲取相對于圖片區(qū)域的裁剪區(qū)相關(guān)數(shù)據(jù)。
那么后續(xù)的需求接著來了,我們怎么做到二次編輯的時候,能還原效果呢,嗯,其實在前面我們記錄裁圖數(shù)據(jù)的時候,把相應(yīng)的數(shù)據(jù)關(guān)系再計算一遍就好了,在初始化cropper的options中增加配置
const options = { dragMode: 'move', background: false, //控件初始化后重置相應(yīng)配置 ready: () => { const { width, height, imgWidth, imgHeight, imgLeft, imgTop } = this.state; //根據(jù)實際需要出現(xiàn)裁圖功能進(jìn)行定位,此處left和top僅為測試暫時默認(rèn)值定義 const left = 50; const top = 50; this.myCropper.setCanvasData({ width: imgWidth, height: imgHeight, left: left, top: top }); this.myCropper.setCropBoxData({ left: left - imgLeft, top: top - imgTop, width: width, height: height }) } } this.myCropper = new Cropper(this.myRef.current, options);
這時候我們再點擊裁圖,就完美還原了,左邊和上邊的間隙就是setCanvasData的top和left,根據(jù)實際項目進(jìn)行調(diào)整,setCropBoxData的left和top是相對于cropper-canvas的定位,才有了以上的計算形式。
此時,基本功能到此結(jié)束,如果說是應(yīng)用在h6編輯中,設(shè)計到scale縮放的話,相關(guān)的數(shù)據(jù)計算都要算上scale的縮放值哦,不然就會出現(xiàn)展示圖片和編輯圖片大小不對等的狀況。同時還有許多功能就不做展示了,設(shè)置裁剪框比例,編輯縮放等,歡迎嘗試。
當(dāng)然了,如果想要保存圖片,也有相應(yīng)的方法到處裁剪圖片的數(shù)據(jù)
this.myCropper.getCroppedCanvas().toDataURL('image/jpeg')
關(guān)于“javascript怎么實現(xiàn)自由編輯圖片功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。