首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

微信小程序图片选择区域裁剪实现方法

Posted in Javascript onDecember 02, 2017

本文介绍了微信小程序图片选择区域屏裁剪实现方法，分享给大家。具体如下：

效果图

微信小程序图片选择区域裁剪实现方法

微信小程序图片选择区域裁剪实现方法

微信小程序图片选择区域裁剪实现方法

HTML代码

<view class="index_all_box">
 <view class="imgCut_header">
 <view class="imgCut_header_l" bindtap='okCutImg'>开始裁剪</view>
 <view class="imgCut_header_m" bindtap='clickUpImg'>点击上传图片</view>
 <view class="imgCut_header_r" bindtap='okBtn'>点击确认</view>
 </view>
 <!-- 选择裁剪模式 -->
 <view class="selectCutMode" wx:if='{{alreay}}'>
 <view class="selectCutMode_in {{cutType?'selectCutMode_in_act':''}}" bindtap='etcType'>
  等屏裁剪
 </view>
 <view class="selectCutMode_in {{!cutType?'selectCutMode_in_act':''}}" bindtap='areaType'>
  区域裁剪
 </view>
 </view>
 <view class="areaSelct_box" wx:if='{{!cutType && alreay}}'>
 <slider bindchange="areaChange" min="50" max="100" show-value value='{{propor}}'/>
 </view>
 <view class="cutImg_box" wx:if='{{!prienFlag}}'>
 <view class="cutImg_box_t">
  <image src="{{cutImgUrl}}" mode='widthFix'></image>
 </view>
 <view class="clickCutImg_txt" bindtap='againBtn'>重新裁剪</view>
 </view>
 <view class="allCavans" wx:if='{{prienFlag}}' style='width: {{canvasW}}px;height: {{canvasH}}px' >
 <canvas class='canvasSty' style='width: {{canvasW}}px;height: {{canvasH}}px' canvas-id='cutImg' disable-scroll='true' bindtouchmove='canvasMove'></canvas>
 <view class="allCavans_inbg" style='width: {{canvasW}}px;height:{{canvasH}}px; background: url({{img}});background-size: 100% 100%'></view>
 </view>
 
 
</view>

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'<br />//获取当前屏幕宽度
  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还有个坑就是裁剪不了,官方正在修复不知道什么时候好

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

微信小程序图片选择区域裁剪实现方法

- Author -

好想再胖十斤

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery 屏蔽一个区域内的所有元素，禁止输入
Oct 22 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
jsTree使用记录实例
Dec 01 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 #Javascript
Angular之toDoList的实现代码示例
Dec 02 #Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 #Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 #Javascript
Vue按需加载的具体实现
Dec 02 #Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 #Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 #jQuery
Flask(2) 进度条(1) PIL(1) 裁剪图片(1) 鲲鹏(1) 信号同步(1) reduce()(1) Python(3) 死锁(3) 生命周期(1)
You might like
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
js 处理URL实用技巧
2010/11/23 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
js查错流程归纳
2012/05/04 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
微信小程序 密码输入（源码下载）
2017/06/27 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
运动服饰每月订阅盒：Ellie
2018/04/29 全球购物
巴西补充剂和维生素购物网站：Natue
2019/06/17 全球购物
什么是事务？为什么需要事务？
2012/01/09 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
入职担保书怎么写
2014/05/12 职场文书
卖车协议书范例
2014/09/16 职场文书
出国签证在职证明范本
2014/11/24 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP