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. 小程序 | 原生实现左滑抽屉菜单

    使用小程序原生框架实现滑动显示抽屉菜单效果,只需50行代码;WXS 模块事件响应 在移动端,侧滑菜单是一个很常 […]...

  2. 小程序 —– js常用方法

    1、 length 获取字符串长度,从0 开始 let filePathNameLenght = filePa […]...

  3. 倒计时功能

    小程序倒计时的显示有两种方法: 一种是列表式的,另外一种是详情式 (1)列表式 test.wxml <b […]...

  4. 小程序代理商好做吗?对小程序创业的人进

      小程序代理商好做吗?我想,如果你真的决定了要做一个小程序代理商,已经真的是狠下决心去开拓小程序本地市场,已 […]...

  5. 不管你们要不要,掘金小程序就这么来了

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

  6. 小程序处理图片加载失败的问题

    今天在开发西奥程序过程中,遇到一个问题,图片加载失败的时候页面,显示空白比较难看,需求是希望再图片加载失败的时 […]...

  7. 云开发 VSCode 插件 Cloudbase Toolkit 的正确打开方式

    该插件可以让您更好地在本地进行云开发项目开发和代码调试,并且轻松将项目部署到云端。 什么是 Cloudbase […]...

  8. mpvue两小时,产出一个《点钞辅助工具》小程序

    CoffeeScript,Pug,Sass使用 以下内容门槛较高,如看不懂或觉得需要继续了解,结尾处放置了原视 […]...

随机推荐

  1. 腾讯云服务器被黑

    开始 登录腾讯云平台后,平台推了一个消息过来,云服务器疑似被黑,前两天部署的平台访问不了了,正常的SSH登录也 […]...

  2. defer 链如何被遍历

    深度解密 defer 底层原理 去年开始写文章的第一篇就是关于 defer,名字比较文艺:《Golang 之轻 […]...

  3. 4.30Java Iterator迭代器遍历容器元素(List/Set/Map)

    4.30Java Iterator迭代器遍历容器元素(List/Set/Map) 迭代器的作用 迭代器遍历Li […]...

  4. 搭建基于springboot轻量级读写分离开发框架

    何为读写分离 读写分离是指对资源的修改和读取进行分离,能解决很多数据库瓶颈,以及代码混乱难以维护等相关的问题, […]...

  5. 电脑睡眠唤醒后窗口重置到左上角的问题

    每次唤醒屏幕后,发现浏览器窗口缩小了,QQ等窗口位置也不在原来的位置上了,目测是唤醒屏幕分辨率1024*768 […]...

  6. kvm-PLE代码分析

    Linux源码版本: 5.3.0 相关数据结构 #define KVM_DEFAULT_PLE_GAP 128 […]...

  7. 利用云函数搭建免费代理池

    一.前言 云函数 云函数(Serverless Cloud Function,SCF)是云计算厂商为企业和开发 […]...

  8. 随记PC-win7 64位系统网络连接状态一直转圈、等待状态的异常解决方案

    各位看官好~ 最近电脑也做了下升级,入手个士必得360G的SSD来玩玩,顺便也下个新系统,看看有什么区别,想想 […]...

热门专题

展开目录

目录导航