微信小程序裁剪頭像插件使用方法詳解
更新時間：2022年05月24日 13:02:34 作者：想吃番茄的西紅柿
這篇文章主要為大家詳細(xì)介紹了微信小程序裁剪頭像插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序裁剪頭像插件的具體使用代碼，供大家參考，具體內(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每日必學(xué)之循環(huán)，本文的主要內(nèi)容就是循環(huán)，死循環(huán)時進(jìn)行bug調(diào)式，感興趣的小伙伴們可以參考一下2016-02-02
javascript轉(zhuǎn)換靜態(tài)圖片，增加粒子動畫效果
這篇文章主要介紹了javascript轉(zhuǎn)換靜態(tài)圖片，增加粒子動畫效果,非常的炫酷，需要的朋友可以參考下2015-05-05
這篇文章主要為大家介紹一下JS中一些你可能不熟悉的知識點給整理一下，學(xué)習(xí)js的朋友可以看一下2019-03-03
JavaScript實現(xiàn)繼承的7種方式總結(jié)
用官方點的話講繼承是面向?qū)ο笕筇卣髦?，可以使得子類具有父類的屬性和方法，同時還可以在子類中重新定義以及追加屬性和方法。本文整理了JavaScript實現(xiàn)繼承的7種方式，需要的可以了解一下2023-04-04
這篇文章主要介紹了小程序兩種滾動公告欄的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了微信小程序利用Canvas繪制圖片和豎排文字詳解，合成圖片應(yīng)該按照 Canvas 的文檔來做都沒什么問題，主要是有個豎排文字的需求，這里和大家分享一下,需要的朋友可以參考下2019-06-06
詳解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
這篇文章主要介紹了JavaScript函數(shù)重載操作,結(jié)合一次面試經(jīng)歷分析了JavaScript函數(shù)重載相關(guān)原理、用法及操作注意事項,需要的朋友可以參考下2020-05-05
本篇文章主要介紹了js正則表達(dá)式驗證表單的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要給大家介紹了關(guān)于JS監(jiān)聽元素dom變化的相關(guān)資料,監(jiān)聽DOM大小的變化,在前端開發(fā)中,算是一個比較常見的需求,比如我們要制作可伸縮的圖表的時候,可能需要根據(jù)DOM大小的變化,進(jìn)行動態(tài)的更新圖表,需要的朋友可以參考下2023-09-09