大爱公益宣传的微信小程序模板源码下载.rar

Component({ properties: { /** * 图片路径 */ 'imgSrc': { type: String }, /** * 裁剪框高度 */ 'height': { type: Number, value: 200 }, /** * 裁剪框宽度 */ 'width': { type: Number, value: 200 }, /** * 裁剪框最小尺寸 */ 'min_width': { type: Number, value: 100 }, 'min_height': { type: Number, value: 100 }, /** * 裁剪框最大尺寸 */ 'max_width': { type: Number, value: 300 }, 'max_height': { type: Number, value: 300 }, /** * 裁剪框禁止拖动 */ 'disable_width': { type: Boolean, value: false }, 'disable_height': { type: Boolean, value: false }, /** * 锁定裁剪框比例 */ 'disable_ratio':{ type: Boolean, value: false }, /** * 生成的图片尺寸相对剪裁框的比例 */ 'export_scale': { type: Number, value: 3 }, /** * 生成的图片质量0-1 */ 'quality': { type: Number, value: 1 }, 'cut_top': { type: Number, value: null }, 'cut_left': { type: Number, value: null }, /** * canvas上边距（不设置默认不显示） */ 'canvas_top': { type: Number, value: null }, /** * canvas左边距（不设置默认不显示） */ 'canvas_left': { type: Number, value: null }, /** * 图片宽度 */ 'img_width': { type: null, value: null }, /** * 图片高度 */ 'img_height': { type: null, value: null }, /** * 图片缩放比 */ 'scale': { type: Number, value: 1 }, /** * 图片旋转角度 */ 'angle': { type: Number, value: 0 }, /** * 最小缩放比 */ 'min_scale': { type: Number, value: 0.5 }, /** * 最大缩放比 */ 'max_scale': { type: Number, value: 2 }, /** * 是否禁用旋转 */ 'disable_rotate': { type: Boolean, value: false }, /** * 是否限制移动范围(剪裁框只能在图片内) */ 'limit_move':{ type: Boolean, value: false } }, data: { el: 'image-cropper', //暂时无用 info: wx.getSystemInfoSync(), MOVE_THROTTLE:null,//触摸移动节流settimeout MOVE_THROTTLE_FLAG: true,//节流标识 INIT_IMGWIDTH: 0, //图片设置尺寸,此值不变（记录最初设定的尺寸） INIT_IMGHEIGHT: 0, //图片设置尺寸,此值不变（记录最初设定的尺寸） TIME_BG: null,//背景变暗延时函数 TIME_CUT_CENTER:null, _touch_img_relative: [{ x: 0, y: 0 }], //鼠标和图片中心的相对位置 _flag_cut_touch:false,//是否是拖动裁剪框 _hypotenuse_length: 0, //双指触摸时斜边长度 _flag_img_endtouch: false, //是否结束触摸 _flag_bright: true, //背景是否亮 _canvas_overflow:true,//canvas缩略图是否在屏幕外面 _canvas_width:200, _canvas_height:200, origin_x: 0.5, //图片旋转中心 origin_y: 0.5, //图片旋转中心 _cut_animation: false,//是否开启图片和裁剪框过渡 _img_top: wx.getSystemInfoSync().windowHeight / 2, //图片上边距 _img_left: wx.getSystemInfoSync().windowWidth / 2, //图片左边距 watch: { //监听截取框宽高变化 width(value, that) { if (value < that.data.min_width){ that.setData({ width: that.data.min_width }); } that._computeCutSize(); }, height(value, that) { if (value < that.data.min_height) { that.setData({ height: that.data.min_height }); } that._computeCutSize(); }, angle(value, that){ //停止居中裁剪框，继续修改图片位置 that._moveStop(); if(that.data.limit_move){ if (that.data.angle % 90) { that.setData({ angle: Math.round(that.data.angle / 90) * 90 }); return; } } }, _cut_animation(value, that){ //开启过渡300毫秒之后自动关闭 clearTimeout(that.data._cut_animation_time); if (value){ that.data._cut_animation_time = setTimeout(()=>{ that.setData({ _cut_animation:false }); },300) } }, limit_move(value, that){ if (value) { if (that.data.angle%90){ that.setData({ angle: Math.round(that.data.angle / 90)*90 }); } that._imgMarginDetectionScale(); !that.data._canvas_overflow && that._draw(); } }, canvas_top(value, that){ that._canvasDetectionPosition(); }, canvas_left(value, that){ that._canvasDetectionPosition(); }, imgSrc(value, that){ that.pushImg(); }, cut_top(value, that) { that._cutDetectionPosition(); if (that.data.limit_move) { !that.data._canvas_overflow && that._draw(); } }, cut_left(value, that) { that._cutDetectionPosition(); if (that.data.limit_move) { !that.data._canvas_overflow && that._draw(); } } } }, attached() { this.data.info = wx.getSystemInfoSync(); //启用数据监听 this._watcher(); this.data.INIT_IMGWIDTH = this.data.img_width; this.data.INIT_IMGHEIGHT = this.data.img_height; this.setData({ _canvas_height: this.data.height, _canvas_width: this.data.width, }); this._initCanvas(); this.data.imgSrc && (this.data.imgSrc = this.data.imgSrc); //根据开发者设置的图片目标尺寸计算实际尺寸 this._initImageSize(); //设置裁剪框大小>设置图片尺寸>绘制canvas this._computeCutSize(); //检查裁剪框是否在范围内 this._cutDetectionPosition(); //检查canvas是否在范围内 this._canvasDetectionPosition(); //初始化完成 this.triggerEvent('load', { cropper: this }); }, methods: { /** * 上传图片 */ upload() { let that = this; wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success(res) { const tempFilePaths = res.tempFilePaths[0]; that.pushImg(tempFilePaths); wx.showLoading({ title: '加载中...' }) } }) }, /** * 返回图片信息 */ getImg(getCallback) { this._draw(()=>{ wx.canvasToTempFilePath({ width: this.data.width * this.data.export_scale, height: Math.round(this.data.height * this.data.export_scale), destWidth: this.data.width * this.data.export_scale, destHeight: Math.round(this.data.height) * this.data.export_scale, fileType: 'png', quality: this.data.quality, canvasId: this.data.el, success: (res) => { getCallback({ url: res.tempFilePath, width: this.data.width * this.data.export_scale, height: this.data.height * this.data.export_scale }); } }, this) }); }, /** * 设置图片动画 * { * x:10,//图片在原有基础上向下移动10px * y:10,//图片在原有基础上向右移动10px * angle:10,//图片在原有基础上旋转10deg * scale:0.5,//图片在原有基础上增加0.5倍 * } */ setTransform(transform) { if (!transform) return; if (!this.data.di