微信小程序?qū)崿F(xiàn)照片裁剪

更新時(shí)間：2022年05月24日 12:40:53 作者：極品老大

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)照片裁剪，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)照片裁剪的具體代碼，供大家參考，具體內(nèi)容如下

前段時(shí)間用小程序的canvas、movable-area、movable-view封裝了一個(gè)按比例裁剪照片的組件，無(wú)需引用任何插件。廢話不多說(shuō)，直接貼代碼：

組件代碼

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 // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持
? },
? properties: {
? ? // 這里定義了innerText屬性，屬性值可以在組件使用時(shí)指定
? ? //寬高比
? ? 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: {
? ? // 這里是一個(gè)自定義方法
? ? //選擇照片
? ? 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標(biāo)簽的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();
? ? ? ? ? ? ? //確保不同大小的圖片，切圖不會(huì)變形
? ? ? ? ? ? ? $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();
? ? // ? })
? ? // },
? ? //裁剪框移動(dòng)事件
? ? 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)
? ? },
? ? //動(dòng)態(tài)設(shè)置裁剪框大小,確定高度不得超過(guò)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}

引用頁(yè)代碼

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({

? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? cut_src:'',
? ? cutWidth:0,
? ? cutHeight:0,
? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
? ?*/
? 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重合，通過(guò)movable-view來(lái)確定裁剪區(qū)域。為了確保圖片加載不變形，選擇完圖片后，需要?jiǎng)討B(tài)設(shè)置canvas、movable-area的高度及movable-view的寬高。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: