CSS代码

.imgCut_header{
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #000;
	color: #fff;
	font-size: 24rpx;
}
.allCavans{
	margin: 20rpx auto;
	position: relative;
}
.canvasSty{
	position: absolute;
}
.cutImg_box{
	width: 100%;
	
	border-bottom: 2rpx #f98700 solid;
	padding-bottom: 20rpx;
}
.cutImg_box .cutImg_box_t{
	width: 90%;
	margin: 20rpx auto;
}
.cutImg_box image{
	width: 100%;
}
.cutImg_box .cutImg_box_b{
	margin-top: 20rpx;
	width: 80%;
	height: 80rpx;
	line-height: 80rpx;
	background: #f98700;
	color: #fff;
	border-radius: 10rpx;
	text-align: center;
	margin:0rpx auto;
}
.selectCutMode{
	background: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.selectCutMode .selectCutMode_in{
	width: 100%;
	text-align: center;
	background: #fff;
	color: #f98700;
	font-size: 24rpx;
	padding: 20rpx;
}
.selectCutMode .selectCutMode_in_act{
	background: #f98700;
	color: #fff;
	padding: 20rpx;
}
.areaSelct_box{
	width: 100%;
	display: flex;
	align-items: center;
	height: 50rpx;
	justify-content: center;
	margin-top: 20rpx;
}
.areaSelct_box slider{
	width: 80%;
}
.cutImg_box .clickCutImg_txt{
	width: 100%;
	text-align: center;
	height: 50rpx;
	font-size: 24rpx;
	line-height: 50rpx;
	color: #999;
}

JS代码部分

初始加载带入上一个页面带过来的参数路径

onLoad: function (options) {
    var that = this;
    const ctx = wx.createCanvasContext('cutImg');
    ctx.setGlobalAlpha(0.4)
    var aa = 'https://pintuanqu.oss-cn-hangzhou.aliyuncs.com/Uploads/Picture/goodsShow/20171201/5a2125fc86566.png'
  //获取当前屏幕宽度 var phoneW = Number(util.nowPhoneWH()[0]*90)/100; var cutH = 150; wx.getImageInfo({ src: aa, success: function (res) { var w = phoneW; var h = (phoneW/Number(res.width))*Number(res.height) ctx.save() ctx.drawImage(aa, 0, 0, w, h) ctx.restore() ctx.setFillStyle('red') ctx.fillRect(0, 0, phoneW, cutH) ctx.draw() that.setData({ canvasW:w, canvasH:h, img:aa, cutH:cutH }) } }) },

确定选择区域开始裁剪

// 点击确认裁剪图片
  okCutImg:function(){
    var that = this;
    var canvasW = that.data.canvasW;
    var canvasH = that.data.canvasH;
    var nowCutW = that.data.cutType?canvasW:that.data.nowCutW;
    var nowCutH = that.data.cutType?that.data.cutH:that.data.nowCutH;
    var cutX = that.data.cutX;
    var cutY = that.data.cutY;
    const ctx = wx.createCanvasContext('cutImg');
    ctx.setGlobalAlpha(1)
    ctx.drawImage(that.data.img, 0, 0, canvasW, canvasH)
    ctx.draw()
    wx.canvasToTempFilePath({
      x: cutX,
      y: cutY,
      width: nowCutW,
      height: nowCutH,
      destWidth: nowCutW,
      destHeight: nowCutH,
      canvasId: 'cutImg',
      success: function(res) {
        var aa = res.tempFilePath
        that.setData({
          cutImgUrl:aa,
          prienFlag:false,
          alreay:false
        })
      } 
    })
  },

 

 红框根据手指移动方法

// 点击红框开始移动
  canvasMove:function(e){
    var that = this;
    var canvasW = that.data.canvasW;
    var canvasH = that.data.canvasH;
    var nowCutW = that.data.cutType?canvasW:that.data.nowCutW;
    var nowCutH = that.data.cutType?that.data.cutH:that.data.nowCutH
    var touches = e.touches[0];   
    var x = touches.x;
    var y = touches.y-(Number(nowCutH)/2);
    that.data.cutType?x=0:x=x-(Number(nowCutW)/2);
    that.setData({
      cutX:x,
      cutY:y
    })
    const ctx = wx.createCanvasContext('cutImg');
    ctx.setGlobalAlpha(0.4)
    ctx.drawImage(that.data.img, 0, 0, canvasW, canvasH)
    ctx.setFillStyle('red')
    ctx.fillRect(x, y, nowCutW, nowCutH)
    ctx.draw()
  },

 

上方两个选择裁剪方式的按钮

等屏裁剪

//等屏裁剪
  etcType:function(){
    var that = this;
    var propor = 100;
    var canvasW = that.data.canvasW;
    var canvasH = that.data.canvasH;
    var cutH = that.data.cutH;
    var nowCutW = (Number(canvasW)*propor)/100
    var nowCutH = (Number(cutH)*propor)/100
    const ctx = wx.createCanvasContext('cutImg');
    ctx.setGlobalAlpha(0.4)
    ctx.drawImage(that.data.img, 0, 0, canvasW, canvasH)
    ctx.setFillStyle('red')
    ctx.fillRect(0, 0, nowCutW, nowCutH)
    ctx.draw()
    that.setData({
      nowCutW:nowCutW,
      nowCutH:nowCutH,
      cutType:true
    })
  },

 

局域裁剪

areaType:function(){
    var that = this;
    var propor = that.data.propor;
    var canvasW = that.data.canvasW;
    var canvasH = that.data.canvasH;
    var cutH = that.data.cutH;
    var nowCutW = (Number(canvasW)*propor)/100
    var nowCutH = (Number(cutH)*propor)/100
    const ctx = wx.createCanvasContext('cutImg');
    ctx.setGlobalAlpha(0.4)
    ctx.drawImage(that.data.img, 0, 0, canvasW, canvasH)
    ctx.setFillStyle('red')
    ctx.fillRect(0,0, nowCutW, nowCutH)
    ctx.draw()
    that.setData({
      nowCutW:nowCutW,
      nowCutH:nowCutH,
      cutType:false
    })
  },

 

局域裁剪上方的滑动选择红框根据宽度等比例缩放

areaChange:function(e){
    var that = this;
    var propor = e.detail.value;
    var canvasW = that.data.canvasW;
    var canvasH = that.data.canvasH;
    var cutH = that.data.cutH;
    var nowCutW = (Number(canvasW)*propor)/100
    var nowCutH = (Number(cutH)*propor)/100
    const ctx = wx.createCanvasContext('cutImg');
    ctx.setGlobalAlpha(0.4)
    ctx.drawImage(that.data.img, 0, 0, canvasW, canvasH)
    ctx.setFillStyle('red')
    ctx.fillRect(that.data.cutX||0, that.data.cutY||0,nowCutW, nowCutH)
    ctx.draw()
    that.setData({
      nowCutW:nowCutW,
      nowCutH:nowCutH,
      propor:propor
    })
  },

  

重新裁剪回到初始选择图片的页面

// 重新裁剪
  againBtn:function(){
    var that = this;
    var data = that.data
    this.setData({
      prienFlag:true,
      alreay:true
    })
    const ctx = wx.createCanvasContext('cutImg');
    ctx.setGlobalAlpha(0.4)
    ctx.drawImage(data.img, 0, 0, data.canvasW, data.canvasH)
    ctx.setFillStyle('red')
    ctx.fillRect(that.data.cutX||0, that.data.cutY||0, data.nowCutW||data.canvasW, data.nowCutH||data.cutH)
    ctx.draw()
  },

 现在IOS还有个坑就是裁剪不了,官方正在修复不知道什么时候好 目前时间2017-12-02

版权声明:本文为lcming原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:http://www.cnblogs.com/lcming/p/7954211.html

小程序图片选择区域/等屏裁剪实现方法的更多相关文章

  1. 小程序 wx.request ajax示例

    简单示例  https://developers.weixin.qq.com/miniprogram/dev/ […]...

  2. Eruda 一个被人遗忘的移动端调试神器

    引言 ​  日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的,既然有问题,那就也就有调试,说到调试工具 […]...

  3. 微信小程序商城 带java后台源码

    微信小程序商城 带java后台源码 微信小程序商城(Java版) 演示地址 账号:admin 密码:admin […]...

  4. 微信小程序 scroll-view 之横向滑动注意事项及示例

    在开发微信小程序时,会遇到需要横向滑动的情况。但讲道理,微信小程序的 scroll-view 不太好用。 对于 […]...

  5. 小程序中多个echarts折线图在同一个页面的使用

    最近做小程序的业务中遇到一个页面要同时显示几个echarts图,刚开始遇到各种冲突,死数据可以,动态数据就报错 […]...

  6. 浅谈简单实现file控件的图片预览,裁剪和上传。

    1.图片预览之FileReader对象    FileReader 对象允许Web应用程序异步读取存储在用户计 […]...

  7. 两天撸微信小程序系列–第二篇

    声明 这并不是掘金官方小程序(貌似没有搜到掘金 APP 对应的官方小程序),完全为第三者开发者开发,仅用于学习 […]...

  8. 小程序授权及获取unionid,

    1:获取session_key ,我用第三方平台做的小程序登录 2: 获取unionid,   遇到的问题:服 […]...

随机推荐

  1. Deepin Linux安装MySQL方法

    sudo apt-get install mysql-server apt-get install mysql […]...

  2. div居中方式

    1. position: absolute; top:50%;left: 50%; margin-top: - […]...

  3. 怎么用dos命令进入指定的文件夹

    在正常开发中经常需要我们进入指定的文件夹下面的例子演示了进入这个文件夹D:\portal\liferay-po […]...

  4. Xshell 本地上传、远程下载文件

          1.Xshell登录工具在创建会话的时候,点击最下面的ZMODEM,可以填写下载的路径和加载的路径 […]...

  5. C# GDI+ 绘制图像 – 一通

    C# GDI+ 绘制图像 原文:http://cs.cqut.edu.cn/NetTeachPlatform/ […]...

  6. GJM :Unity3D 介绍

    unity3D是如今最火爆的游戏开发引擎,它可以让我们能轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类 […]...

  7. 关于阿里 阿里巴巴共享业务事业部UED团队 出品的sui基于zepto的开源UI框架的使用心得

    1.项目官网地址:http://m.sui.taobao.org/ 2.项目使用可以参考开始使用和示例 3.项 […]...

  8. CentOS7安装图形化界面方法 CentOS7安装图形化界面方法

    一、linux安装(root用户操作) 1. 安装vncserver; yum install tigervn […]...

热门专题

展开目录

目录导航