微信小程序實現照片裁剪
本文實例為大傢分享瞭微信小程序實現照片裁剪的具體代碼，供大傢參考，具體內容如下
前段時間用小程序的canvas、movable-area、movable-view封裝瞭一個按比例裁剪照片的組件，無需引用任何插件。廢話不多說，直接貼代碼：
組件代碼
1.cut_photo.json
{
"component": true
}
2.cut_photo.wxml
<view>
<canvas class="fyj_canvas" canvas-id="myCanvas" style="width:100%;height:{{canvasHeight}}px">
<movable-area class="fyj_movable_area text-center hidden" style="width:100%;height:{{canvasHeight}}px;">
<movable-view wx:if="{{src}}" style="width:{{cutWidth}}px;height:{{cutHeight}}px" class="fyj_movable_view"
x="{{x}}"
y="{{y}}"
direction="all"
bindchange="movableChange"
></movable-view>
<image class="fyj_photo" id="fyj_photo" src="{{src}}" mode="widthFix"></image>
</movable-area>
</canvas>
<view style="margin-top:20rpx;padding:0 20rpx;">
<button class="pull-left" type="warn" size="mini" bindtap="getPhoto">選擇照片/拍照</button>
<button class="pull-right" type="primary" size="mini" bindtap="cut">裁剪</button>
<view class="clearfix"></view>
</view>
</view>
3.cut_photo.js
const app = getApp()
Component({
options: {
//multipleSlots: true // 在組件定義時的選項中啟用多slot支持
},
properties: {
// 這裡定義瞭innerText屬性，屬性值可以在組件使用時指定
//寬高比
aspectRatio: {
type: Number,
value: 5/7,
}
},
data: {
screenWidth: wx.getSystemInfoSync().windowWidth,
canvasHeight: 300,
x: 0,
y: 0,
src: '',
cut_src: '',
cutWidth: 0,
cutHeight: 0
},
attached: function () {
},
methods: {
// 這裡是一個自定義方法
//選擇照片
getPhoto: function () {
const $this = this;
const ctx = wx.createCanvasContext('myCanvas',this)
var obj = wx.createSelectorQuery();
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
//清空之前的剪切圖
$this.triggerEvent('getTempFilePath', { cut_src: '', cutWidth: $this.data.cutWidth, cutHeight: $this.data.cutHeight })
// tempFilePath可以作為img標簽的src屬性顯示圖片
const tempFilePaths = res.tempFilePaths[0];
$this.setData({
src: tempFilePaths,
cut_src: '',
});
setTimeout(function () {
wx.createSelectorQuery().in($this).select('#fyj_photo').boundingClientRect(function (rect) {
console.log(rect);
console.log(rect.height);
$this.setData({
canvasHeight: rect.height
})
ctx.drawImage(tempFilePaths, 0, 0, $this.data.screenWidth, $this.data.canvasHeight)
ctx.draw();
$this.setCut();
//確保不同大小的圖片，切圖不會變形
$this.setData({
x: 0,
y: 0
});
}).exec()
}, 100)
}
})
},
//獲取圖片高度
// getHeight:function(){
// const query = wx.createSelectorQuery().in(this)
// query.selectAll('#fyj_photo').boundingClientRect()
// query.exec(function (rect) {
// console.log(rect);
// console.log(rect[0].height);
// $this.setData({
// canvasHeight: rect[0].height
// })
// ctx.drawImage(tempFilePaths[0], 0, 0, $this.data.screenWidth, $this.data.canvasHeight)
// ctx.draw();
// $this.setCut();
// })
// },
//裁剪框移動事件
movableChange: function (e) {
console.log(e.detail);
this.setData({
x: e.detail.x,
y: e.detail.y
})
},
//截圖
cut: function () {
const $this = this;
console.log($this.data.cutHeight);
wx.canvasToTempFilePath({
x: $this.data.x,
y: $this.data.y,
width: $this.data.cutWidth,
height: $this.data.cutHeight,
destWidth: $this.data.cutWidth,
destHeight: $this.data.cutHeight,
canvasId: 'myCanvas',
success(res) {
console.log(res.tempFilePath);
$this.setData({
cut_src: res.tempFilePath
})
$this.triggerEvent('getTempFilePath', { cut_src: $this.data.cut_src, cutWidth: $this.data.cutWidth, cutHeight: $this.data.cutHeight})
}
},this)
},
//動態設置裁剪框大小,確定高度不得超過canvas的高度
setCut: function () {
const $this = this;
this.setData({
cutWidth: wx.getSystemInfoSync().windowWidth * 0.8,
cutHeight: wx.getSystemInfoSync().windowWidth * 0.8/this.data.aspectRatio
})
if (this.data.cutHeight - 4 > this.data.canvasHeight) {
console.log($this.data.cutHeight);
console.log($this.data.canvasHeight);
this.setData({
cutHeight: this.data.canvasHeight - 4,
cutWidth: (this.data.canvasHeight - 4)*this.data.aspectRatio
})
} else {
this.setData({
cutWidth: wx.getSystemInfoSync().windowWidth * 0.8,
cutHeight: wx.getSystemInfoSync().windowWidth * 0.8/this.data.aspectRatio
})
}
console.log($this.data.cutWidth);
console.log($this.data.cutHeight);
},
}
})
4.cut_photo.wxss
.fyj_movable_area{width:100%;height:auto;position: relative;background:rgba(0,0,0,0.3)}
.fyj_movable_view{border:2px dashed #fff}
.fyj_photo{width:100%;}
.fyj_footer{margin-top:20rpx 0;}
.fyj_footerBtn{width:100%;display: inline-block;color:#fff;border-radius: 0;font-size:32rpx;}
.fyj_sure{background: #fc6b47;}
.pull-left{float:left;}
.pull-right{float:right}
.clearfix{clear:both}
.text-center{text-align: center}
引用頁代碼
1.page.json
{
"navigationBarTitleText": "選擇照片",
"usingComponents": {
"cut-photo": "/pages/cut_photo/cut_photo"
}
}
2.page.wxml
<view>
<!-- aspectRatio 剪裁圖片的寬高比 -->
<cut-photo aspectRatio="0.5" bindgetTempFilePath="getCutsrc"></cut-photo>
<view wx:if="{{cut_src}}" class="fyj_cutDiv text-center">
<image style="width:{{cutWidth}}px;height:{{cutHeight}}px" class="fyj_cut_photo" src="{{cut_src}}" mode="widthFix"></image>
</view>
<view wx:if="{{cut_src}}" class="fyj_footer text-center">
<button class="fyj_footerBtn fyj_sure" bindtap='sure'>確定</button>
</view>
</view>
3.page.js
const app = getApp()
Page({
/**
* 頁面的初始數據
*/
data: {
cut_src:'',
cutWidth:0,
cutHeight:0,
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
getCutsrc:function(e){
console.log(e);
this.setData({
cut_src: e.detail.cut_src,
cutWidth: e.detail.cutWidth,
cutHeight: e.detail.cutHeight
})
}
})
4.page.wxss
.fyj_footer{margin-top:20rpx 0;}
.fyj_footerBtn{width:100%;display: inline-block;color:#fff;border-radius: 0;font-size:32rpx;}
.fyj_sure{background: #fc6b47;}
.fyj_cutDiv{margin:20rpx 0;}
大概思路
將canvas跟movable-area重合，通過movable-view來確定裁剪區域。為瞭確保圖片加載不變形，選擇完圖片後，需要動態設置canvas、movable-area的高度及movable-view的寬高。
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。