微信小程序图片上传和裁剪
本篇博客用于解决微信小程序图片裁剪问题
图片裁剪常用于头像选择和图片合成等。
图片裁剪解决方案:
目前网络上知名的微信小程序图片裁剪插件是we-cropper(文末有链接)
操作步骤:下载好we-cropper文件夹,拷贝到小程序目录,可以放在pages列表中。
第一步:wxml中引入插件的wxml,使用模板,编写按钮绑定事件。
第二步,js中引入插件的js,设置参数,初始化对象。
请看下方操作:
wxml中:
<import src="../we-cropper/we-cropper.wxml"/> <view class="imgDisposeBlock"> <view class='titleBar'> 图片上传 </view> <view class='imgDisposeArea'> <template is="we-cropper" data="{{...cropperOpt}}"/> </view> <view class='imgDisposeControlLine'> <view class='editBtn reelectBtn' bindtap="uploadTap">选择图片</view> <view class='editBtn editPerfectBtn' bindtap="getCropperImage">上传</view> </view> </view>
wxss中:
/* pages/weCoperStudy/weCoperStudy.wxss */ page{ width: 100%; height: 100%; } .titleBar{ width: 100vw; height: 128rpx; position: fixed; top:0; left: 0; z-index:100; text-align: center; line-height: 158rpx; font-size: 36rpx; color:#fff; background: linear-gradient(to right, #cff79c 0%,#06d806 100%); } .imgDisposeBlock{ position: absolute; z-index: 99; left:0; top:0; width:100vw; height:100vh; background: rgb(0, 0, 0); overflow: hidden; } .imgDisposeArea{ width:100vw; height:90vh; overflow: hidden; background: #FFF; } .imgDisposeControlLine{ width: 100vw; height:10vh; position: relative; background: #fff; } .editBtn{ position: absolute; top:50%; transform: translateY(-50%); width:260rpx; height: 60rpx; background: #3a8d5f; font-size: 30rpx; text-align: center; line-height: 60rpx; color:#fff; } .editBtn.reelectBtn{ left:10%; } .editBtn.editPerfectBtn{ right:10%; } .finalCanvasClass{ position:absolute; top:-600%; left:0; z-index:15; transform-origin: left top; transform: scale(0.25); } .letterCanvasClass{ position:absolute; top:-9999rpx; left:0; transform-origin: left top; transform: scale(0.25); z-index: -1; } .letterSrcClass{ position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; } /* 截图canvas放大 真机上不行*/ /* .cropper{ transform-origin: left top; transform: scale(0.25); } */ .shadowBlock{ width:100%; height:100%; background:#f7f7f7; position: absolute; top:0; left:0; z-index: 99; }
小程序js代码:
// pages/weCoperStudy/weCoperStudy.js import WeCropper from '../we-cropper/we-cropper.js' const device = wx.getSystemInfoSync() // 获取设备信息 const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框 const devicePixelRatio = device.pixelRatio const height = device.windowHeight - 70 const fs = width / 750 * 2 Page({ /** * 页面的初始数据 */ data: { imgSrc:'',//确定裁剪后的图片 cropperOpt: { id: 'cropper', width: width, // 画布宽度 height: height, // 画布高度 scale: 2.5, // 最大缩放倍数 zoom: 8, // 缩放系数 cut: { x: (width - 250) / 2, // 裁剪框x轴起点(width * fs * 0.128) / 2 y: (height * 0.5 - 250 * 0.5), // 裁剪框y轴期起点 width: 250, // 裁剪框宽度 height: 250// 裁剪框高度 } }, }, touchStart(e) { this.cropper.touchStart(e) }, touchMove(e) { this.cropper.touchMove(e) }, touchEnd(e) { this.cropper.touchEnd(e) }, uploadTap() { const self = this wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success(res) { const src = res.tempFilePaths[0]; self.wecropper.pushOrign(src); } }) }, getCropperImage() { let that = this; wx.showToast({ title: '上传中', icon: 'loading', duration: 20000 }) // 如果有需要两层画布处理模糊,实际画的是放大的那个画布 this.wecropper.getCropperImage((src) => { if (src) { that.setData({ imgSrc: src }) wx.hideToast() // wx.previewImage({ // current: '', // 当前显示图片的http链接 // urls: [src] // 需要预览的图片http链接列表 // }) } else { console.log('获取图片地址失败,请稍后重试') } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { const { cropperOpt } = this.data this.cropper = new WeCropper(cropperOpt) .on('ready', (ctx) => { console.log(`wecropper is ready for work!`) }) .on('beforeImageLoad', (ctx) => { wx.showToast({ title: '上传中', icon: 'loading', duration: 20000 }) }) .on('imageLoad', (ctx) => { wx.hideToast() }) //刷新画面 this.wecropper.updateCanvas() } })
效果参考图,插件提供了双指缩放和移动来调整截取区域,如果截图模糊可以用两层模板,其中隐藏一层放大倍数,最终也是截取放大的canvas,不过需要个人去计算调整相关参数:
插件下载:https://github.com/we-plugin/we-cropper
参考教程:https://we-plugin.github.io/we-cropper/#/
裁剪框四个角的颜色和大小和蒙层透明度请自行在we-cropper.js中查找修改:
尝试搜索“color”关键词,大概在900行左右(版本we-cropper v1.2.0)。
有人住高楼,有人处深沟。
有人光万丈,有人一生绣。
时光是匆匆,回首无旧梦。
人生若几何,凡尘事非多。
深情总遗却,妄自也洒脱。