微信小程序裁剪頭像插件使用方法詳解
本文實例為大家分享了微信小程序裁剪頭像插件的具體使用代碼,供大家參考,具體內(nèi)容如下
用戶上傳頭像,需要裁剪成正方形,結(jié)合在網(wǎng)上找到裁剪圖片方法,封裝為微信小程序組件。調(diào)用很方便。
參數(shù)介紹:
- image_url:需要裁剪的圖片鏈接
- showCutImage:是否顯示裁剪圖片組件
wxml調(diào)用:
<cutImage imageUrl="{{image_url}}" bind:returnImageUrl="returnImageUrl" ?wx:if="{{showCutImage}}" > </cutImage>
js調(diào)用:
returnImageUrl: function (e) { ?? ?//e.detail.imageUrl,e.detail.showCutImage ? }
wxml代碼:
<view class='fixed-upimg'> ? <view class="wx-content-info" > ? ? <view class="iamge-box" style="width:100%;height:{{imageBoxHeight}}px;"> ? ? ? <image style="height:{{imageHeight}}px;width:{{imageWidth}}px;" src="{{imageUrl}}"></image> ? ? ? <view class="wx-corpper-crop-box" bindtouchstart="contentStartMove" bindtouchmove="contentMoveing" style="width:{{cutW}}px;height:{{cutH}}px;left:{{cutL}}px;top:{{cutT}}px"> ? ? ? ? <view class="wx-cropper-view-box"> ? ? ? ? ? <view class="wx-cropper-dashed-h"></view> ? ? ? ? ? <view class="wx-cropper-dashed-v"></view> ? ? ? ? ? <view class="wx-cropper-line-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> ? ? ? ? ? <view class="wx-cropper-line-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> ? ? ? ? ? <view class="wx-cropper-line-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> ? ? ? ? ? <view class="wx-cropper-line-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> ? ? ? ? ? <view class="wx-cropper-point point-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> ? ? ? ? ? <view class="wx-cropper-point point-tr" data-drag="topTight"></view> ? ? ? ? ? <view class="wx-cropper-point point-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> ? ? ? ? ? <view class="wx-cropper-point point-rb" data-drag="rightBottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> ? ? ? ? ? <view class="wx-cropper-point point-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> ? ? ? ? ? <view class="wx-cropper-point point-bl" data-drag="bottomLeft"></view> ? ? ? ? ? <view class="wx-cropper-point point-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view> ? ? ? ? ? <view class="wx-cropper-point point-lt" data-drag="leftTop"></view> ? ? ? ? </view> ? ? ? </view> ? ? </view> ? ? <canvas canvas-id="myCanvas" style="position:absolute;border: 1px solid red; width:{{imageW}}px;height:{{imageH}}px;top:-9999px;left:-9999px;"></canvas> ? ? <view ?class='button-tjtp' bindtap="getImageInfo" style="position:fixed;bottom:0rpx;"> 提交圖片 </view> ? </view> </view>
wxss代碼:
.button-tjtp{ ? width: 300rpx; ? height: 45px; ? border-radius: 50rpx; ? color: #151D37; ? background-color: #fff; ? margin: 20px 225rpx; ? font-size: 30rpx; ? display: flex; ? justify-content: center; ? align-items: center; } .fixed-upimg{ ? ? position: fixed; ? top: 0; ? left: 0; ? right: 0; ? bottom: 0; ? background-color: #000; ? z-index: 9999; } .wx-content-info{ ? position: fixed; ? top: 0rpx; ? left: 0; ? right: 0; ? bottom: 0; ? } .iamge-box{ ? display: flex; ? justify-content: center; ? align-items: center; } .wx-corpper-crop-box{ ? ? position: absolute; ? ? width: 500rpx; ? ? height: 500rpx; ? ? background: rgba(255,255,255,0.3); ? ? z-index: 2; } .wx-cropper-view-box { ? ? position: relative; ? ? display: block; ? ? width: 100%; ? ? height: 100%; ? ? overflow: visible; ? ? outline: 1px solid #69f; ? ? outline-color: rgba(102, 153, 255, .75) } ? /* 橫向虛線 */ .wx-cropper-dashed-h{ ? ? position: absolute; ? ? top: 33.33333333%; ? ? left: 0; ? ? width: 100%; ? ? height: 33.33333333%; ? ? border-top: 1px dashed rgba(255,255,255,0.5); ? ? border-bottom: 1px dashed rgba(255,255,255,0.5); } ? /* 縱向虛線 */ .wx-cropper-dashed-v{ ? ? position: absolute; ? ? left: 33.33333333%; ? ? top: 0; ? ? width: 33.33333333%; ? ? height: 100%; ? ? border-left: 1px dashed rgba(255,255,255,0.5); ? ? border-right: 1px dashed rgba(255,255,255,0.5); } ? /* 四個方向的線 ?為了之后的拖動事件*/ .wx-cropper-line-t{ ? ? position: absolute; ? ? display: block; ? ? width: 100%; ? ? background-color: #69f; ? ? top: 0; ? ? left: 0; ? ? height: 1px; ? ? opacity: 0.1; ? ? cursor: n-resize; } ? .wx-cropper-line-t::before{ ? content: ''; ? position: absolute; ? top: 50%; ? right: 0rpx; ? width: 100%; ? -webkit-transform: translate3d(0,-50%,0); ? transform: translate3d(0,-50%,0); ? bottom: 0; ? height: 41rpx; ? background: transparent; ? z-index: 11; } ? .wx-cropper-line-r{ ? ? position: absolute; ? ? display: block; ? ? background-color: #69f; ? ? top: 0; ? ? right: 0px; ? ? width: 1px; ? ? opacity: 0.1; ? ? height: 100%; ? ? cursor: e-resize; } .wx-cropper-line-r::before{ ? content: ''; ? position: absolute; ? top: 0; ? left: 50%; ? width: 41rpx; ? -webkit-transform: translate3d(-50%,0,0); ? transform: translate3d(-50%,0,0); ? bottom: 0; ? height: 100%; ? background: transparent; ? z-index: 11; } ? .wx-cropper-line-b{ ? ? position: absolute; ? ? display: block; ? ? width: 100%; ? ? background-color: #69f; ? ? bottom: 0; ? ? left: 0; ? ? height: 1px; ? ? opacity: 0.1; ? ? cursor: s-resize; } ? .wx-cropper-line-b::before{ ? content: ''; ? position: absolute; ? top: 50%; ? right: 0rpx; ? width: 100%; ? -webkit-transform: translate3d(0,-50%,0); ? transform: translate3d(0,-50%,0); ? bottom: 0; ? height: 41rpx; ? background: transparent; ? z-index: 11; } ? .wx-cropper-line-l{ ? ? position: absolute; ? ? display: block; ? ? background-color: #69f; ? ? top: 0; ? ? left: 0; ? ? width: 1px; ? ? opacity: 0.1; ? ? height: 100%; ? ? cursor: w-resize; } .wx-cropper-line-l::before{ ? content: ''; ? position: absolute; ? top: 0; ? left: 50%; ? width: 41rpx; ? -webkit-transform: translate3d(-50%,0,0); ? transform: translate3d(-50%,0,0); ? bottom: 0; ? height: 100%; ? background: transparent; ? z-index: 11; } ? .wx-cropper-point{ ? ? width: 5px; ? ? height: 5px; ? ? background-color: #69f; ? ? opacity: .75; ? ? position: absolute; ? ? z-index: 3; } ? .point-t{ ? ? top: -3px; ? ? left: 50%; ? ? margin-left: -3px; ? ? cursor: n-resize; } ? .point-tr{ ? ? top: -3px; ? ? left: 100%; ? ? margin-left: -3px; ? ? cursor: n-resize; } ? .point-r{ ? ? top: 50%; ? ? left:100%; ? ? margin-left: -3px; ? ? margin-top: -3px; ? ? cursor: n-resize; } ? .point-rb{ ? ? left: 100%; ? ? top: 100%; ? ? -webkit-transform: translate3d(-50%,-50%,0); ? ? transform: translate3d(-50%,-50%,0); ? ? cursor: n-resize; ? ? width: 24rpx; ? ? height: 24rpx; ? ? background-color: #69f; ? ? position: absolute; ? ? z-index: 1112; ? ? opacity: 1; } ? .point-b{ ? ? left:50%; ? ? top: 100%; ? ? margin-left: -3px; ? ? margin-top: -3px; ? ? cursor: n-resize; } ? .point-bl{ ? ? left:0%; ? ? top: 100%; ? ? margin-left: -3px; ? ? margin-top: -3px; ? ? cursor: n-resize; } ? .point-l{ ? ? left:0%; ? ? top: 50%; ? ? margin-left: -3px; ? ? margin-top: -3px; ? ? cursor: n-resize; } ? .point-lt{ ? ? left:0%; ? ? top: 0%; ? ? margin-left: -3px; ? ? margin-top: -3px; ? ? cursor: n-resize; } ? /* 裁剪框預(yù)覽內(nèi)容 */ .wx-cropper-viewer{ ? position: relative; ? width: 100%; ? height: 100%; ? overflow: hidden; } ? .wx-cropper-viewer image{ ? position: absolute; ? z-index: 2; }
js代碼:
var pageX = 0 // 拖動時候的 pageY var pageY = 0 // 移動時 手勢位移與 實際元素位移的比 var dragScaleP = 2 var pixelRatio = wx.getSystemInfoSync().pixelRatio Component({ ? /** ? ?* 組件的屬性列表 ? ?*/ ? properties: { ? ? imageUrl:{ ? ? ? type:String, ? ? ? value:'' ? ? } ? }, ? /** ? ?* 組件的初始數(shù)據(jù) ? ?*/ ? data: { ? ? imageBoxHeight:0, ? ? windowWidth: 0, ? ? imageUrl:'' ? }, ? lifetimes: { ? ? // 生命周期函數(shù),可以為函數(shù),或一個在methods段中定義的方法名 ? ? attached: function () { ? ? ? this.getSysInfo(); ? ? ? this.getImageDetail(); ? ? }, ? }, ? created: function () { ? ? this.getSysInfo(); ? }, ? /** ? ?* 組件的方法列表 ? ?*/ ? methods: { ? ? // 獲取設(shè)備信息 ? ? getSysInfo () {? ? ? ? wx.getSystemInfo({ ? ? ? ? success: (res) => { ? ? ? ? ? console.log(res) ? ? ? ? ? this.setData({ ? ? ? ? ? ? imageBoxHeight: res.windowHeight - 85, ? ? ? ? ? ? windowWidth: res.windowWidth ? ? ? ? ? }) ? ? ? ? }, ? ? ? }) ? ? }, ? ? getImageDetail(){ ? ? ? wx.getImageInfo({ ? ? ? ? src: this.data.imageUrl, ? ? ? ? success: (res) => { ? ? ? ? ? this.setData({ ? ? ? ? ? ? imageW: res.width / 2, ? ? ? ? ? ? imageH: res.height / 2 ? ? ? ? ? }) ? ? ? ? ? if (res.width >= res.height) { ? ? ? ? ? ? var h = (res.height * this.data.windowWidth) / res.width; ? ? ? ? ? ? this.setData({ ? ? ? ? ? ? ? imageWidth: this.data.windowWidth, ? ? ? ? ? ? ? imageHeight: h, ? ? ? ? ? ? ? cutW: h, ? ? ? ? ? ? ? cutH: h, ? ? ? ? ? ? ? cutL: (this.data.windowWidth - h) / 2, ? ? ? ? ? ? ? cutT: (this.data.imageBoxHeight - h) / 2 ? ? ? ? ? ? }) ? ? ? ? ? } else { ? ? ? ? ? ? var w = (this.data.imageBoxHeight * res.width) / res.height; ? ? ? ? ? ? this.setData({ ? ? ? ? ? ? ? imageWidth: w, ? ? ? ? ? ? ? imageHeight: this.data.imageBoxHeight, ? ? ? ? ? ? ? cutW: w, ? ? ? ? ? ? ? cutH: w, ? ? ? ? ? ? ? cutL: (this.data.windowWidth - w) / 2, ? ? ? ? ? ? ? cutT: (this.data.imageBoxHeight - w) / 2 ? ? ? ? ? ? }) ? ? ? ? ? } ? ? ? ? } ? ? ? }) ? ? }, ? ? // 拖動時候觸發(fā)的touchMove事件 ? ? contentMoveing(e) { ? ? ? var _this = this ? ? ? // _this.data.cutL + (e.touches[0].pageX - pageX) ? ? ? // console.log(e.touches[0].pageX) ? ? ? // console.log(e.touches[0].pageX - pageX) ? ? ? var dragLengthX = (pageX - e.touches[0].pageX) ? ? ? var dragLengthY = (pageY - e.touches[0].pageY) ? ? ? var minX = Math.max(_this.data.cutL - (dragLengthX), 0) ? ? ? var minY = Math.max(_this.data.cutT - (dragLengthY), 0) ? ? ? var maxX = _this.data.imageWidth - _this.data.cutW ? ? ? var maxY = _this.data.imageHeight - _this.data.cutH ? ? ? if (_this.data.imageWidth == _this.data.cutW) { ? ? ? ? this.setData({ ? ? ? ? ? cutT: Math.min(maxY, minY), ? ? ? ? }) ? ? ? } else if (_this.data.imageHeight == _this.data.cutH) { ? ? ? ? this.setData({ ? ? ? ? ? cutL: Math.min(maxX, minX) ? ? ? ? }) ? ? ? } ? ? ? console.log(`${maxX} ----- ${minX}`) ? ? ? pageX = e.touches[0].pageX ? ? ? pageY = e.touches[0].pageY ? ? }, ? ? // 拖動時候觸發(fā)的touchStart事件 ? ? contentStartMove(e) { ? ? ? pageX = e.touches[0].pageX ? ? ? pageY = e.touches[0].pageY ? ? }, ? ? // 裁剪圖片 ? ? getImageInfo() { ? ? ? var _this = this ? ? ? console.log('shengcheng:' + _this.data.imageUrl) ? ? ? wx.showLoading({ ? ? ? ? title: '圖片生成中...', ? ? ? }) ? ? ? // wx.downloadFile({ ? ? ? // ? url:_this.data.imageSrc, //僅為示例,并非真實的資源 ? ?? ? ? ? // ? success: function (res) { ? ? ? // 將圖片寫入畫布 ? ? ? ? ? ?? ? ? ? const ctx = wx.createCanvasContext('myCanvas', _this) ? ? ? // ctx.drawImage(res.tempFilePath) ? ? ? ctx.drawImage(_this.data.imageUrl, 0, 0, _this.data.imageW, _this.data.imageH) ? ? ? ctx.draw(true, () => { ? ? ? ? // 獲取畫布要裁剪的位置和寬度 ? 均為百分比 * 畫布中圖片的寬度 ? ?保證了在微信小程序中裁剪的圖片模糊 ?位置不對的問題 ? ? ? ? var canvasW = (_this.data.cutW / _this.data.imageWidth) * (_this.data.imageW) ? ? ? ? var canvasH = (_this.data.cutH / _this.data.imageHeight) * (_this.data.imageH) ? ? ? ? var canvasL, canvasT; ? ? ? ? if (_this.data.imageHeight == _this.data.imageBoxHeight) { ? ? ? ? ? canvasL = (0 / _this.data.imageWidth) * (_this.data.imageW) ? ? ? ? } else { ? ? ? ? ? canvasL = (_this.data.cutL / _this.data.imageWidth) * (_this.data.imageW) ? ? ? ? } ? ? ? ? if (_this.data.imageWidth == _this.data.windowWidth) { ? ? ? ? ? canvasT = (0 / _this.data.imageHeight) * (_this.data.imageH) ? ? ? ? } else { ? ? ? ? ? canvasT = (_this.data.cutT / _this.data.imageHeight) * (_this.data.imageH) ? ? ? ? } ? ? ? ? console.log(`canvasW:${canvasW} --- canvasH: ${canvasH} --- canvasL: ${canvasL} --- canvasT: ${canvasT} -------- _this.data.imageW: ${_this.data.imageW} ?------- _this.data.imageH: ${_this.data.imageH} ---- pixelRatio ${pixelRatio}`) ? ? ? ? wx.canvasToTempFilePath({ ? ? ? ? ? x: canvasL, ? ? ? ? ? y: canvasT, ? ? ? ? ? width: canvasW, ? ? ? ? ? height: canvasH, ? ? ? ? ? destWidth: canvasW, ? ? ? ? ? destHeight: canvasH, ? ? ? ? ? canvasId: 'myCanvas', ? ? ? ? ? success: function (res) { ? ? ? ? ? ? // 成功獲得地址的地方 ? ? ? ? ? ? var tempFilePath = res.tempFilePath; ? ? ? ? ? ? wx.hideLoading() ? ? ? ? ? ? _this.returnImageUrl(tempFilePath) ? ? ? ? ? ?? ? ? ? ? ? }, ? ? ? ? ? fail: function (res) { ? ? ? ? ? ? console.log(res) ? ? ? ? ? ? wx.hideLoading() ? ? ? ? ? ? wx.showModal({ ? ? ? ? ? ? ? content: '抱歉,圖片上傳失??!圖片過大可能導(dǎo)致圖片上傳失?。?, ? ? ? ? ? ? ? showCancel: false, ? ? ? ? ? ? ? confirmText: '我知道了', ? ? ? ? ? ? ? confirmColor: "#151D37", ? ? ? ? ? ? ? success: function (res) { ? ? ? ? ? ? ? ? if (res.confirm) { ? ? ? ? ? ? ? ? ? _this.setData({ ? ? ? ? ? ? ? ? ? ? imageFixed: false, ? ? ? ? ? ? ? ? ? ? tempFilePath: res.tempFilePath ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? } ? ? ? ? ? ? }) ? ? ? ? ? } ? ? ? ? }, _this) ? ? ? }) ? ? }, ? ? returnImageUrl: function (url) { ? ? ? this.triggerEvent('returnImageUrl', { ? ? ? ? imageUrl: url, ? ? ? ? showCutImage:false ? ? ? }) ? ? } ? } })
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript轉(zhuǎn)換靜態(tài)圖片,增加粒子動畫效果
這篇文章主要介紹了javascript轉(zhuǎn)換靜態(tài)圖片,增加粒子動畫效果,非常的炫酷,需要的朋友可以參考下2015-05-05JavaScript實現(xiàn)繼承的7種方式總結(jié)
用官方點的話講繼承是面向?qū)ο笕筇卣髦?,可以使得子類具有父類的屬性和方法,同時還可以在子類中重新定義以及追加屬性和方法。本文整理了JavaScript實現(xiàn)繼承的7種方式,需要的可以了解一下2023-04-04詳解XMLHttpRequest(二)響應(yīng)屬性、二進(jìn)制數(shù)據(jù)、監(jiān)測上傳下載進(jìn)度
這篇文章主要為大家詳細(xì)介紹了XMLHttpRequest響應(yīng)屬性、二進(jìn)制數(shù)據(jù)、監(jiān)測上傳下載進(jìn)度,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09