wxml
<view class="bg-white flex justify-between align-center padding-sm"> <view class="text-black">头像</view> <image style="width:200rpx;height:200rpx;" src='{{comp_img}}' bindtap='change_img'></image> </view>js
change_img: function () { wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success(res) { const src = res.tempFilePaths[0] wx.navigateTo({ url: '../../../../../../canvas/upload/upload?src=' + src//裁剪专用页面 }) } }) },template.wxml
<!--模块2-图片剪切---> <template name="weCropper"> <canvas class="cropper" disable-scroll="true" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" style="width:{{width}}px;height:{{height}}px;background-color: rgba(0, 0, 0, 0.8)" canvas-id="{{id}}"> </canvas> </template>template.js
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.weCropper = factory()); }(this, (function () { 'use strict'; /** * Created by sail on 2017/6/11. */ var device = void 0; var TOUCH_STATE = ['touchstarted', 'touchmoved', 'touchended']; function firstLetterUpper(str) { return str.charAt(0).toUpperCase() + str.slice(1); } function setTouchState(instance) { for (var _len = arguments.length, arg = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { arg[_key - 1] = arguments[_key]; } TOUCH_STATE.forEach(function (key, i) { if (arg[i] !== undefined) { instance[key] = arg[i]; } }); } function validator(instance, o) { Object.defineProperties(instance, o); } function getDevice() { if (!device) { device = wx.getSystemInfoSync(); } return device; } var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; var classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }; var createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); var tmp = {}; var DEFAULT = { id: { default: 'cropper', get: function get$$1() { return tmp.id; }, set: function set$$1(value) { if (typeof value !== 'string') { console.error('id\uFF1A' + value + ' is invalid'); } tmp.id = value; } }, width: { default: 750, get: function get$$1() { return tmp.width; }, set: function set$$1(value) { if (typeof value !== 'number') { console.error('width\uFF1A' + value + ' is invalid'); } tmp.width = value; } }, height: { default: 750, get: function get$$1() { return tmp.height; }, set: function set$$1(value) { if (typeof value !== 'number') { console.error('height\uFF1A' + value + ' is invalid'); } tmp.height = value; } }, scale: { default: 2.5, get: function get$$1() { return tmp.scale; }, set: function set$$1(value) { if (typeof value !== 'number') { console.error('scale\uFF1A' + value + ' is invalid'); } tmp.scale = value; } }, zoom: { default: 5, get: function get$$1() { return tmp.zoom; }, set: function set$$1(value) { if (typeof value !== 'number') { console.error('zoom\uFF1A' + value + ' is invalid'); } else if (value < 0 || value > 10) { console.error('zoom should be ranged in 0 ~ 10'); } tmp.zoom = value; } }, src: { default: 'cropper', get: function get$$1() { return tmp.src; }, set: function set$$1(value) { if (typeof value !== 'string') { console.error('id\uFF1A' + value + ' is invalid'); } tmp.src = value; } }, cut: { default: {}, get: function get$$1() { return tmp.cut; }, set: function set$$1(value) { if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) !== 'object') { console.error('id\uFF1A' + value + ' is invalid'); } tmp.cut = value; } }, onReady: { default: null, get: function get$$1() { return tmp.ready; }, set: function set$$1(value) { tmp.ready = value; } }, onBeforeImageLoad: { default: null, get: function get$$1() { return tmp.beforeImageLoad; }, set: function set$$1(value) { tmp.beforeImageLoad = value; } }, onImageLoad: { default: null, get: function get$$1() { return tmp.imageLoad; }, set: function set$$1(value) { tmp.imageLoad = value; } }, onBeforeDraw: { default: null, get: function get$$1() { return tmp.beforeDraw; }, set: function set$$1(value) { tmp.beforeDraw = value; } } }; /** * Created by sail on 2017/6/11. */ function prepare() { var self = this; var _getDevice = getDevice(), windowWidth = _getDevice.windowWidth; self.attachPage = function () { var pages = getCurrentPages // 获取到当前page上下文 (); var pageContext = pages[pages.length - 1]; // 把this依附在Page上下文的wecropper属性上，便于在page钩子函数中访问 pageContext.wecropper = self; }; self.createCtx = function () { var id = self.id; if (id) { self.ctx = wx.createCanvasContext(id); } else { console.error('constructor: create canvas context failed, \'id\' must be valuable'); } }; self.deviceRadio = windowWidth / 750; } /** * */ function observer() { var self = this; var EVENT_TYPE = ['ready', 'beforeImageLoad', 'beforeDraw', 'imageLoad']; self.on = function (event, fn) { if (EVENT_TYPE.indexOf(event) > -1) { if (typeof fn === 'function') { event === 'ready' ? fn(self) : self['on' + firstLetterUpper(event)] = fn; } } else { console.error('event: ' + event + ' is invalid'); } return self; }; } /** * Created by sail on 2017/6/11. */ function methods() { var self = this; var deviceRadio = self.deviceRadio; var boundWidth = self.width; // 裁剪框默认宽度，即整个画布宽度 var boundHeight = self.height; // 裁剪框默认高度，即整个画布高度 var _self$cut = self.cut, _self$cut$x = _self$cut.x, x = _self$cut$x === undefined ? 0 : _self$cut$x, _self$cut$y = _self$cut.y, y = _self$cut$y === undefined ? 0 : _self$cut$y, _self$cut$width = _self$cut.width, width = _self$cut$width === undefined ? boundWidth : _self$cut$width, _self$cut$height = _self$cut.height, height = _self$cut$height === undefined ? boundHeight : _self$cut$height; self.updateCanvas = function () { if (self.croperTarget) { // 画布绘制图片 self.ctx.drawImage(self.croperTarget, self.imgLeft, self.imgTop, self.scaleWidth, self.scaleHeight); } typeof self.onBeforeDraw === 'function' && self.onBeforeDraw(self.ctx, self); self.setBoundStyle // 设置边界样式 (); self.ctx.draw(); return self; }; self.pushOrign = function (src) { self.src = src; typeof self.onBeforeImageLoad === 'function' && self.onBeforeImageLoad(self.ctx, self); wx.getImageInfo({ src: src, success: function success(res) { var innerAspectRadio = res.width / res.height; self.croperTarget = res.path; console.log(x, y); if (innerAspectRadio < width / height) { self.rectX = x; self.baseWidth = width; self.baseHeight = width / innerAspectRadio; self.rectY = y - Math.abs((height - self.baseHeight) / 2); } else { self.rectY = y; self.baseWidth = height * innerAspectRadio; self.baseHeight = height; self.rectX = x - Math.abs((width - self.baseWidth) / 2); } self.imgLeft = self.rectX; self.imgTop = self.rectY; self.scaleWidth = self.baseWidth; self.scaleHeight = self.baseHeight; self.updateCanvas(); typeof self.onImageLoad === 'function' && self.onImageLoad(self.ctx, self); } }); self.update(); return self; }; self.getCropperImage = function () { for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } var id = self.id; var ARG_TYPE = toString.call(args[0]); switch (ARG_TYPE) { case '[object Object]': var _args$0$quality = args[0].quality, quality = _args$0$quality === undefined ? 10 : _args$0$quality; if (typeof quality !== 'number') { console.error('quality\uFF1A' + quality + ' is invalid'); } else if (quality < 0 || quality > 10) { console.error('quality should be ranged in 0 ~ 10'); } wx.canvasToTempFilePath({ canvasId: id, x: x, y: y, width: width, height: height, destWidth: width * quality / (deviceRadio * 10), destHeight: height * quality / (deviceRadio * 10), success: function success(res) { typeof args[args.length - 1] === 'function' && args[args.length - 1](res.tempFilePath); } }); break; case '[object Function]': wx.canvasToTempFilePath({ canvasId: id, x: x, y: y, width: width, height: height, destWidth: width / deviceRadio, destHeight: height / deviceRadio, success: function success(res) { typeof args[args.length - 1] === 'function' && args[args.length - 1](res.tempFilePath); } }); break; } return self; }; } /** * Created by sail on 2017/6/11. */ function update() { var self = this; if (!self.src) return; self.__oneTouchStart = function (touch) { self.touchX0 = touch.x; self.touchY0 = touch.y; }; self.__oneTouchMove = function (touch) { var xMove = void 0, yMove = void 0; //计算单指移动的距离 if (self.touchended) { return self.updateCanvas(); } xMove = touch.x - self.touchX0; yMove = touch.y - self.touchY0; var imgLeft = self.rectX + xMove; var imgTop = self.rectY + yMove; self.outsideBound(imgLeft, imgTop); self.updateCanvas(); }; self.__twoTouchStart = function (touch0, touch1) { var xMove = void 0, yMove = void 0, oldDistance = void 0; self.touchX1 = self.rectX + self.scaleWidth / 2; self.touchY1 = self.rectY + self.scaleHeight / 2; //计算两指距离 xMove = touch1.x - touch0.x; yMove = touch1.y - touch0.y; oldDistance = Math.sqrt(xMove * xMove + yMove * yMove); self.oldDistance = oldDistance; }; self.__twoTouchMove = function (touch0, touch1) { var xMove = void 0, yMove = void 0, newDistance = void 0; var scale = self.scale, zoom = self.zoom; // 计算二指最新距离 xMove = touch1.x - touch0.x; yMove = touch1.y - touch0.y; newDistance = Math.sqrt(xMove * xMove + yMove * yMove // 使用0.005的缩放倍数具有良好的缩放体验 ); self.newScale = self.oldScale + 0.001 * zoom * (newDistance - self.oldDistance); // 设定缩放范围 self.newScale <= 1 && (self.newScale = 1); self.newScale >= scale && (self.newScale = scale); self.scaleWidth = self.newScale * self.baseWidth; self.scaleHeight = self.newScale * self.baseHeight; var imgLeft = self.touchX1 - self.scaleWidth / 2; var imgTop = self.touchY1 - self.scaleHeight / 2; self.outsideBound(imgLeft, imgTop); self.updateCanvas(); }; self.__xtouchEnd = function () { self.oldScale = self.newScale; self.rectX = self.imgLeft; self.rectY = self.imgTop; }; } /** * Created by sail on 2017/6/11. */ var handle = { // 图片手势初始监测 touchStart: function touchStart(e) { var self = this; var _e$touches = slicedToArray(e.touches, 2), touch0 = _e$touches[0], touch1 = _e$touches[1]; setTouchState(self, true, null, null //计算第一个触摸点的位置，并参照改点进行缩放 ); self.__oneTouchStart(touch0 // 两指手势触发 ); if (e.touches.length >= 2) { self.__twoTouchStart(touch0, touch1); } }, // 图片手势动态缩放 touchMove: function touchMove(e) { var self = this; var _e$touches2 = slicedToArray(e.touches, 2), touch0 = _e$touches2[0], touch1 = _e$touches2[1]; setTouchState(self, null, true // 单指手势时触发 ); if (e.touches.length === 1) { self.__oneTouchMove(touch0); } // 两指手势触发 if (e.touches.length >= 2) { self.__twoTouchMove(touch0, touch1); } }, touchEnd: function touchEnd(e) { var self = this; setTouchState(self, false, false, true); self.__xtouchEnd(); } }; /** * Created by sail on 1017/6/12. */ function cut() { var self = this; var deviceRadio = self.deviceRadio; var boundWidth = self.width; // 裁剪框默认宽度，即整个画布宽度 var boundHeight = self.height; // 裁剪框默认高度，即整个画布高度 var _self$cut = self.cut, _self$cut$x = _self$cut.x, x = _self$cut$x === undefined ? 0 : _self$cut$x, _self$cut$y = _self$cut.y, y = _self$cut$y === undefined ? 0 : _self$cut$y, _self$cut$width = _self$cut.width, width = _self$cut$width === undefined ? boundWidth : _self$cut$width, _self$cut$height = _self$cut.height, height = _self$cut$height === undefined ? boundHeight : _self$cut$height; /** * 设置边界 * @param imgLeft 图片左上角横坐标值 * @param imgTop 图片左上角纵坐标值 */ self.outsideBound = function (imgLeft, imgTop) { self.imgLeft = imgLeft >= x ? x : self.scaleWidth + imgLeft - x <= width ? x + width - self.scaleWidth : imgLeft; self.imgTop = imgTop >= y ? y : self.scaleHeight + imgTop - y <= height ? y + height - self.scaleHeight : imgTop; }; /** * 设置边界样式 * @param color 边界颜色 */ self.setBoundStyle = function () { var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, _ref$color = _ref.color, color = _ref$color === undefined ? '#04b00f' : _ref$color, _ref$mask = _ref.mask, mask = _ref$mask === undefined ? 'rgba(0, 0, 0, 0.3)' : _ref$mask, _ref$lineWidth = _ref.lineWidth, lineWidth = _ref$lineWidth === undefined ? 1 : _ref$lineWidth; // 绘制半透明层 self.ctx.beginPath(); self.ctx.setFillStyle(mask); self.ctx.fillRect(0, 0, x, boundHeight); self.ctx.fillRect(x, 0, width, y); self.ctx.fillRect(x, y + height, width, boundHeight - y - height); self.ctx.fillRect(x + width, 0, boundWidth - x - width, boundHeight); self.ctx.fill // 设置边界左上角样式 // 为使边界样式处于边界外边缘，此时x、y均要减少lineWidth (); self.ctx.beginPath(); self.ctx.setStrokeStyle(color); self.ctx.setLineWidth(lineWidth); self.ctx.moveTo(x - lineWidth, y + 10 - lineWidth); self.ctx.lineTo(x - lineWidth, y - lineWidth); self.ctx.lineTo(x + 10 - lineWidth, y - lineWidth); self.ctx.stroke // 设置边界左下角样式 // 为使边界样式处于边界外边缘，此时x要减少lineWidth、y要增加lineWidth (); self.ctx.beginPath(); self.ctx.setStrokeStyle(color); self.ctx.setLineWidth(lineWidth); self.ctx.moveTo(x - lineWidth, y + height - 10 + lineWidth); self.ctx.lineTo(x - lineWidth, y + height + lineWidth); self.ctx.lineTo(x + 10 - lineWidth, y + height + lineWidth); self.ctx.stroke // 设置边界右上角样式 // 为使边界样式处于边界外边缘，此时x要增加lineWidth、y要减少lineWidth (); self.ctx.beginPath(); self.ctx.setStrokeStyle(color); self.ctx.setLineWidth(lineWidth); self.ctx.moveTo(x + width - 10 + lineWidth, y - lineWidth); self.ctx.lineTo(x + width + lineWidth, y - lineWidth); self.ctx.lineTo(x + width + lineWidth, y + 10 - lineWidth); self.ctx.stroke // 设置边界右下角样式 // 为使边界样式处于边界外边缘，此时x、y均要增加lineWidth (); self.ctx.beginPath(); self.ctx.setStrokeStyle(color); self.ctx.setLineWidth(lineWidth); self.ctx.moveTo(x + width + lineWidth, y + height - 10 + lineWidth); self.ctx.lineTo(x + width + lineWidth, y + height + lineWidth); self.ctx.lineTo(x + width - 10 + lineWidth, y + height + lineWidth); self.ctx.stroke(); }; } var __version__ = '1.1.4'; var weCropper = function () { function weCropper(params) { classCallCheck(this, weCropper); var self = this; var _default = {}; validator(self, DEFAULT); Object.keys(DEFAULT).forEach(function (key) { _default[key] = DEFAULT[key].default; }); Object.assign(self, _default, params); self.prepare(); self.attachPage(); self.createCtx(); self.observer(); self.cutt(); self.methods(); self.init(); self.update(); return self; } createClass(weCropper, [{ key: 'init', value: function init() { var self = this; var src = self.src; self.version = __version__; typeof self.onReady === 'function' && self.onReady(self.ctx, self); if (src) { self.pushOrign(src); } setTouchState(self, false, false, false); self.oldScale = 1; self.newScale = 1; return self; } }]); return weCropper; }(); Object.assign(weCropper.prototype, handle); weCropper.prototype.prepare = prepare; weCropper.prototype.observer = observer; weCropper.prototype.methods = methods; weCropper.prototype.cutt = cut; weCropper.prototype.update = update; return weCropper; })));新建裁剪专用页面 wxml
<import src='../../../template/template.wxml' /> <cu-custom bgColor="bg-gradual-{{Theme}}" isBack="{{true}}"> <view slot="backText"><text class="cuIcon-back text-xxl"></text></view> <view slot="content">图片裁剪</view> </cu-custom> <view class="cropper-wrapper"> <template is="weCropper" data="{{...cropperOpt}}" /> <view class="bottom_button padding text-center flex text-content2 justify-between align-center"> <view class="text-white" bindtap="uploadTap"> 重新选择 </view> <view class="text-white" bindtap="getCropperImage"> 确定 </view> </view> </view>json
{ "backgroundTextStyle":"dark", "navigationBarBackgroundColor": "#000", "navigationBarTitleText": "裁剪头像", "navigationBarTextStyle":"white" }wxml
import weCropper from '../../../template/template.js' const app = getApp(); const device = wx.getSystemInfoSync() const width = device.windowWidth const height = device.windowHeight - 50 Page({ data: { Theme: app.globalData.Theme, cropperOpt: { id: 'cropper', width, height, scale: 2.5, zoom: 8, cut: { x: (width - 300) / 2, y: (height - 300) / 2, width: 300, height: 300 } } }, touchStart (e) { this.wecropper.touchStart(e) }, touchMove (e) { this.wecropper.touchMove(e) }, touchEnd (e) { this.wecropper.touchEnd(e) }, getCropperImage () { this.wecropper.getCropperImage((avatar) => { if (avatar) { // 获取到裁剪后的图片 let pages = getCurrentPages();//当前页面 let prevPage = pages[pages.length - 2];//上一页面 prevPage.upload(avatar);//返回裁剪后的图片给上一页面 wx.navigateBack({ delta: 1,//返回上一层（delta=层数） }) } else { console.log('获取图片失败，请稍后重试') } }) }, uploadTap () { const self = this wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success (res) { let src = res.tempFilePaths[0] // 获取裁剪图片资源后，给data添加src属性及其值 self.wecropper.pushOrign(src) } }) }, onLoad (option) { // do something const { cropperOpt } = this.data const { src } = option if (src) { Object.assign(cropperOpt, { src }) new weCropper(cropperOpt) .on('ready', function (ctx) { console.log(`wecropper is ready for work!`) }) .on('beforeImageLoad', (ctx) => { console.log(`before picture loaded, i can do something`) console.log(`current canvas context:`, ctx) wx.showToast({ title: '上传中', icon: 'loading', duration: 20000 }) }) .on('imageLoad', (ctx) => { console.log(`picture loaded`) console.log(`current canvas context:`, ctx) wx.hideToast() }) } } })最后返回把裁剪好的图片返回给上一页处理 js
/**处理返回裁剪后的图片 */ upload: function (avatar){ var that = this; util.uploadImg({ url: "", data: {}, img: avatar, success: function (res) { console.log(res) wx.showToast({ title: '头像上传成功', icon: 'loading', duration: 1000 }) //赋值到头像框 that.setData({ comp_img: avatar }) } }) },封装上传文件组件
/**头像上传-带图片裁剪 * * util.uploadImg({ url: "接口路径", data:{},//额外参数 img:'',//图片的本地路径 success:function(res){ console.log(res) //赋值临时文件src到预览框<image>和返回图片src到隐藏域<input> that.setData({ usgu_guide_cardImg: tempFilePaths, usgu_guide_cardImg_back: res.data }) } }) */ function uploadImg({url,data,img,success}){ wx.showLoading({ title: '上传中', }); let server = app.globalData.fileURL;//正式域名 wx.uploadFile({ url: server + url, header: { "Content-Type": "multipart/form-data", Authorization: wx.getStorageSync("sid") + enjs() }, filePath: img, name: 'file',//这里其实是设置Key名。后台获取: $_FILES['file'] formData: data,//额外参数 success: function (res) { //console.log(res.data); let data_json = JSON.parse(res.data); console.log(data_json); if (data_json.success == 1) { // 隐藏加载框 wx.hideLoading(); success(res) } else if (data_json.success == 2) { postCode().then(function (locationData) { console.log('重新登录回调newid：' + locationData) //重新来 uploadImg({ url, data, method, success, }) }) } else { wx.hideLoading(); //其他状态多数为非法入侵，函数回馈提示后截断在当页。 wx.showModal({ title: '温馨提示', content: res.data.error || '网络繁忙,请稍后重试！', showCancel: false,//关闭取消按钮 }) } }, fail: function (res) { wx.hideToast(); wx.showModal({ title: '错误提示', content: '上传图片失败', showCancel: false, success: function (res) { } }) } }) }