微信小程序选项卡功能开发步骤与方法全解析
488
2023-11-13
微信小程序实现照片裁剪
本文实例为大家分享了微信小程序实现照片裁剪的具体代码，供大家参考，具体内容如下
前段时间用小程序的canvas、movable-area、movable-view封装了一个按比例裁剪照片的组件，无需引用任何插件。废话不多说，直接贴代码：
组件代码
1.cut_photo.json
?
1
2
3
{
"component": true
}
2.cut_photo.wxml
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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
4.cut_photo.wxss
?
1
2
3
4
5
6
7
8
9
10
.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
?
1
2
3
4
5
6
{
"navigationBarTitleText": "选择照片",
"usingComponents": {
"cut-photo": "/pages/cut_photo/cut_photo"
}
}
2.page.wxml
?
1
2
3
4
5
6
7
8
9
10
<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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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
?
1
2
3
4
.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的宽高。
您可能感兴趣的文章:微信小程序裁剪头像插件使用方法详解微信小程序实现裁剪图片大小小程序实现图片预览裁剪插件微信小程序实现上传图片裁剪图片过程解析微信小程序简单的canvas裁剪图片功能详解微信小程序之裁剪图片成圆形的实现代码微信小程序图片选择区域裁剪实现方法微信小程序开发（二）图片上传+服务端接收详解微信小程序实现上传图片功能小程序实现图片裁剪上传
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~