这篇文章主要讲解了“微信小程序如何实现照片裁剪”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“微信小程序如何实现照片裁剪”吧！
组件代码
1.cut_photo.json
{
"component": true
}2.cut_photo.wxml
<view>
<canvas class="fyj_canvas" canvas-id="myCanvas" >
<movable-area class="fyj_movable_area text-center hidden" >
<movable-view wx:if="{{src}}" 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 >
<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 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的宽高。
感谢各位的阅读，以上就是“微信小程序如何实现照片裁剪”的内容了，经过本文的学习后，相信大家对微信小程序如何实现照片裁剪这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
