微信小程序实现照片裁剪
作者:极品老大
这篇文章主要为大家详细介绍了微信小程序实现照片裁剪,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现照片裁剪的具体代码,供大家参考,具体内容如下
前段时间用小程序的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的宽高。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。