首页
所有分类
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 相关文章推荐
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
JS搜狐面试题分析
Dec 16 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
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
greenlet(1) 信息校验(1) csv(4) pytest(3) Excel(4) Coroutine(1) 进销存(1) find(1) gevent(1) list(1)
You might like
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
golang与PHP输出excel示例
2016/07/22 PHP
微信公众平台开发-微信服务器IP接口实例（含源码）
2017/03/05 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
关于php支持的协议与封装协议总结（推荐）
2017/11/17 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
JQuery的$命名冲突详细解析
2013/12/28 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python Flask-web表单使用详解
2017/11/18 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
python实现Virginia无密钥解密
2019/03/20 Python
Python @property原理解析和用法实例
2020/02/11 Python
python输出数学符号实例
2020/05/11 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
Python实现随机爬山算法
2021/01/29 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
华为C++笔试题
2014/08/05 面试题
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
中学生学习生活的自我评价
2013/10/26 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
诉前财产保全担保书
2014/05/20 职场文书
推普周活动总结
2014/08/28 职场文书
聘任证明怎么写
2015/03/02 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书