cropperjs實(shí)現(xiàn)裁剪圖片功能
本文實(shí)例為大家分享了cropperjs實(shí)現(xiàn)裁剪圖片功能的具體代碼,供大家參考,具體內(nèi)容如下
cropperjs (裁剪圖片)
vue版本
// 下載 // npm install cropperjs -save // 使用 //1.0 引入? import Cropper from 'cropperjs' // 2.0初始化裁剪框 ?? ?data(){ ?? ??? ?return{ ?? ??? ??? ?croppable: false // 控制上傳后的顯隱 ?? ??? ?} ?? ?}, ?? ? ?? ?methods:{ ?? ??? ?var _this= this; ?? ??? ?var image = document.getElementById('image'); ?? ??? ?this.cropper = new Cropper(image, { ?? ? ? ? ? ?aspectRatio: 1, ?? ? ? ? ? ?viewMode: 1, ?? ? ? ? ? ?background:false, ?? ? ? ? ? ?zoomable:false, ?? ? ? ? ? ?ready: function () { ?? ? ? ? ? ? ?_this.croppable = true; ?? ? ? ? ? ?} ?? ? ? ?}); ?? ?}
jq版本
<!--必須引入 jquery.min.js , cropper.min.js? ?? ?樣式引入 css/cropper.min.css css/ImgCropping.css--> <link rel="stylesheet" href="css/cropper.min.css" > <link rel="stylesheet" href="css/ImgCropping.css" > <body> <button id="replaceImg" class="l-btn">選擇圖片</button> <div style="width: 320px;height: 320px;border: solid 1px #555;padding: 5px;margin-top: 10px"> ? ? <img id="finalImg" src="" width="100%"> <!-- 預(yù)覽圖,一開始為空--> </div> <!--圖片裁剪框 start--> <div style="display: none" class="tailoring-container"> ? ? <div class="black-cloth" onClick="closeTailor(this)"></div> ? ? <div class="tailoring-content"> ? ? ? ?<div class="tailoring-content-one"> ? ? ? ? ? <label title="上傳圖片" for="chooseImg" class="l-btn choose-btn"> ? ? ? ? ? ? ?<input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onChange="selectImg(this)">選擇圖片 ? ? ? ? ? </label> ? ? ? ?<div class="close-tailoring" ?onclick="closeTailor(this)">×</div> ? ? ? ?</div> ? ? ? ? ? ?<div class="tailoring-content-two"> ? ? ? ? ? ? ? <div class="tailoring-box-parcel"> ? ? ? ? ? ? ? ? ? <img id="tailoringImg" > ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? <div class="preview-box-parcel"> ? ? ? ? ? ? ? ? ?<p>圖片預(yù)覽:</p> ? ? ? ? ? ? ? ? ?<div class="square previewImg"></div> ? ? ? ? ? ? ? ? ?<!-- <div class="circular previewImg"></div> --> ? ? ? ? ? ? ? </div> ? ? ? ? ? ?</div> ? ? ? ? ? ?<div class="tailoring-content-three"> ? ? ? ? ? ? ? ?<button class="l-btn cropper-reset-btn">復(fù)位</button> ? ? ? ? ? ? ? ?<button class="l-btn cropper-rotate-btn">旋轉(zhuǎn)</button> ? ? ? ? ? ? ? ?<button class="l-btn cropper-scaleX-btn">換向</button>? ? ? ? ? ? ?</div> ? ? ? <button class="l-btn sureCut" id="sureCut">確定</button> ? ?</div> </div> </body> <!--圖片裁剪框 end--> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/cropper.min.js"></script> <script> ?? ?//彈出框水平垂直居中 ? ? (window.onresize = function () { ? ? ? ? var win_height = $(window).height(); ? ? ? ? var win_width = $(window).width(); ? ? ? ? if (win_width <= 768){ ? ? ? ? ? ? $(".tailoring-content").css({ ? ? ? ? ? ? ? ? "top": (win_height - $(".tailoring-content").outerHeight())/2, ? ? ? ? ? ? ? ? "left": 0 ? ? ? ? ? ? }); ? ? ? ? }else{ ? ? ? ? ? ? $(".tailoring-content").css({ ? ? ? ? ? ? ? ? "top": (win_height - $(".tailoring-content").outerHeight())/2, ? ? ? ? ? ? ? ? "left": (win_width - $(".tailoring-content").outerWidth())/2 ? ? ? ? ? ? }); ? ? ? ? } ? ? })(); ? ? //彈出圖片裁剪框 ? ? $("#replaceImg").on("click",function () { ? ? ? ? $(".tailoring-container").toggle(); ? ? }); ? ?? ? ? //圖像上傳 ? ? function selectImg(file) { ? ? ? ? if (!file.files || !file.files[0]){ ? ? ? ? ? ? return; ? ? ? ? } ? ? ? ? var reader = new FileReader(); ? ? ? ? reader.onload = function (evt) { ? ? ? ? ? ? var replaceSrc = evt.target.result; ? ? ? ? ? ? //更換cropper的圖片 ? ? ? ? ? ? $('#tailoringImg').cropper('replace', replaceSrc,false); /**默認(rèn)false,適應(yīng)高度,不失真 */ ? ? ? ? } ? ? ? ? reader.readAsDataURL(file.files[0]); ? ? ? ? // console.log(file); ? ? } ? ?? ? ? //cropper圖片裁剪 ? ? $('#tailoringImg').cropper({ ? ? ? ? aspectRatio: 16/9,//默認(rèn)比例 ? ? ? ? preview: '.previewImg',//預(yù)覽視圖 ? ? ? ? guides: false, ??? ?//裁剪框的虛線(九宮格) ? ? ? ? autoCropArea: 0.8, ?//0-1之間的數(shù)值,定義自動(dòng)剪裁區(qū)域的大小,默認(rèn)0.8 ? ? ? ? movable: false, ?? ?//是否允許移動(dòng)圖片 ? ? ? ? dragCrop: false, ??? ?//是否允許移除當(dāng)前的剪裁框,并通過拖動(dòng)來新建一個(gè)剪裁框區(qū)域 ? ? ? ? movable: true, ??? ?//是否允許移動(dòng)剪裁框 ? ? ? ? resizable: true, ??? ?//是否允許改變裁剪框的大小 ? ? ? ? zoomable: false, ??? ?//是否允許縮放圖片大小 ? ? ? ? mouseWheelZoom: false, ?//是否允許通過鼠標(biāo)滾輪來縮放圖片 ? ? ? ? touchDragZoom: true, //是否允許通過觸摸移動(dòng)來縮放圖片 ? ? ? ? rotatable: true, ??? ?//是否允許旋轉(zhuǎn)圖片 ? ? ? ? crop: function(e) { ? ? ? ? ? ? // 輸出結(jié)果數(shù)據(jù)裁剪圖像。 ? ? ? ? ? ? // console.log(e); ? ? ? ? } ? ? }); ? ?? ? ? ?//旋轉(zhuǎn) ? ? ?$(".cropper-rotate-btn").on("click",function () { ? ? ? ? ?$('#tailoringImg').cropper("rotate", 45); ? ? ?}); ? ? ?//復(fù)位 ? ? ?$(".cropper-reset-btn").on("click",function () { ? ? ? ? $('#tailoringImg').cropper("reset"); ? ? ?}); ? ? ?//換向 ? ? ?var flagX = true; ? ? ?$(".cropper-scaleX-btn").on("click",function () { ? ? ? ? ?if(flagX){ ? ? ? ? ? ? ?$('#tailoringImg').cropper("scaleX", -1); ? ? ? ? ? ? ?flagX = false; ? ? ? ? ?}else{ ? ? ? ? ? ? ?$('#tailoringImg').cropper("scaleX", 1); ? ? ? ? ? ? ?flagX = true; ? ? ? ? ?} ? ? ? ? ?flagX != flagX; ? ? ?}); ? ? //裁剪后的處理 ? ? $("#sureCut").on("click",function () { ? ? ? ? if ($("#tailoringImg").attr("src") == null ){ ? ? ? ? ? ? return false; ? ? ? ? }else{ ? ? ? ? ? ? var cas = $('#tailoringImg').cropper('getCroppedCanvas');//獲取被裁剪后的canvas ? ? ? ? ? ? var base64url = cas.toDataURL('image/png'); //轉(zhuǎn)換為base64地址形式 ? ? ? ? ? ? $("#finalImg").prop("src",base64url);//顯示為圖片的形式 ? ? ? ? ? ? // 將base64轉(zhuǎn)換成file對(duì)象 ? ? ? ? ? ? var src = dataURLtoFile(base64url); ? ? ? ? ? ? console.log(base64url); ? ? ? ? ? ? console.log(src); ? ? ? ? ? ? closeTailor(); //關(guān)閉裁剪框 ? ? ? ? } ? ? }); ? ? //關(guān)閉裁剪框 ? ? function closeTailor() { ? ? ? ? $(".tailoring-container").toggle(); ? ? } ? ?? ? ? // 轉(zhuǎn)files ? ? function dataURLtoFile (dataurl, filename = 'file') { ? ? let arr = dataurl.split(',') ? ? let mime = arr[0].match(/:(.*?);/)[1] ? ? let suffix = mime.split('/')[1] ? ? let bstr = atob(arr[1]) ? ? let n = bstr.length ? ? let u8arr = new Uint8Array(n) ? ? while (n--) { ? ? ?? ?u8arr[n] = bstr.charCodeAt(n) ? ? } ? ? ?? ?return new File([u8arr], `${filename}.${suffix}`, {type: mime}) ? ? } </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于原生JS實(shí)現(xiàn)圖片裁剪
- js+jquery實(shí)現(xiàn)圖片裁剪功能
- php+js實(shí)現(xiàn)圖片的上傳、裁剪、預(yù)覽、提交示例
- 基于HTML5+JS實(shí)現(xiàn)本地圖片裁剪并上傳功能
- Cropper.js 實(shí)現(xiàn)裁剪圖片并上傳(PC端)
- 使用ImageMagick進(jìn)行圖片縮放、合成與裁剪(js+python)
- 使用JavaScript+canvas實(shí)現(xiàn)圖片裁剪
- vue-cli結(jié)合Element-ui基于cropper.js封裝vue實(shí)現(xiàn)圖片裁剪組件功能
- Nodejs下使用gm圓形裁剪并合成圖片的示例
- cropper js基于vue的圖片裁剪上傳功能的實(shí)現(xiàn)代碼
相關(guān)文章
p5.js實(shí)現(xiàn)聲音控制警察抓小偷游戲示例解析
這篇文章主要為大家介紹了p5.js實(shí)現(xiàn)聲音控制警察抓小偷游戲示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04bootstrap table實(shí)現(xiàn)雙擊可編輯、添加、刪除行功能
這篇文章主要為大家詳細(xì)介紹了bootstrap table實(shí)現(xiàn)雙擊可編輯、添加、刪除行功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09javascript dom操作之cloneNode文本節(jié)點(diǎn)克隆使用技巧
文本克隆函數(shù)cloneNode他有兩個(gè)參數(shù)——true or false2009-12-12JavaScript中通過提示框跳轉(zhuǎn)頁面的方法
這篇文章主要介紹了JavaScript中通過提示框跳轉(zhuǎn)頁面的方法的相關(guān)資料,需要的朋友可以參考下2016-02-02javascript的字符串按引用復(fù)制和傳遞,按值來比較介紹與應(yīng)用
字符串是按引用復(fù)制和傳遞的,但是是按值來比較的;當(dāng)按值復(fù)制或傳遞時(shí),將在計(jì)算機(jī)內(nèi)存中分配一塊空間并將原值復(fù)制到其中,需要的朋友可以參考下2012-12-12webpack 3.X學(xué)習(xí)之多頁面打包的方法
這篇文章主要介紹了webpack 3.X學(xué)習(xí)之多頁面打包的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09詳解小程序設(shè)置緩存并且不覆蓋原有數(shù)據(jù)
這篇文章主要介紹了小程序設(shè)置緩存并且不覆蓋原有數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04Javascript日期格式化format函數(shù)的使用方法
這篇文章主要介紹的是javascript時(shí)間格式format函數(shù),我們有時(shí)候調(diào)用的new Date()不是格式化的時(shí)間,可能顯示不是很正常,那么這時(shí)候就需要格式化時(shí)間,今天這里分享一個(gè)javascript的foramt()函數(shù),有需要的可以參考借鑒。2016-08-08JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例
這篇文章主要介紹了JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03