微信小程序实现图片多点裁剪

女爷i 2023-10-08 23:49 63阅读 0赞

> **话不多说，直接上代码**

#### 1、页面布局 ####

<view class="buttons" style="height: 50px;">
      <view 
      class="upload btn" 
      style="background-color: #d18118;"
      bindtap="uploadImage"> 上传图片 
      </view>
      <view
        class="getCropperImage btn"
        style="background-color: #04b00f;"
        bindtap="getCropperImage">
        生成图片
      </view>
    </view>
    <view class="canvas">
      <canvas 
      style="width: { { canvasWidth}}px;height: { { canvasHeight}}px;"
      type="2d" 
      id="canvas-1" 
      canvas-id="canvas-1"
      disable-scroll="true"
      ></canvas>
    
      <canvas 
      style="width: { { canvasWidth}}px;height: { { canvasHeight}}px;position: absolute;top: 0;z-index: 999;"
      type="2d" 
      id="canvas-2" 
      disable-scroll="true"
      bindtouchstart="touchStart"
      bindtouchmove="touchMove"
      bindtouchend="touchEnd"
      ></canvas>
    </view>

#### 2、页面样式 ####

page{
        
      padding: 0;
      -webkit-user-select: none;
      user-select: none;
      width: 100%;
      height: 100%;
      background-color: #c0c0c0;
      font-family: Arial, Helvetica, sans-serif;
      overflow-x: hidden;
    }
    .buttons{
        
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 25rpx;
      border-bottom: 1rpx solid white;
    }
    .canvas{
        
      position: relative;
    }

#### 3、页面逻辑 ####

let ctx = null;
    let canvas = null;
    Page({
        
      data: {
        
        canvasWidth:300,
        canvasHeight:500,
        pixelRatio:2,
    
        pointRadius:12,// 裁剪框边角原点半径
        point:[[48,48],[312, 48],[312, 224],[48, 224]],// 裁剪框边角原点位置
        moveIndex:-1//点击的剪切框原点小标
      },
    
      onLoad (options) {
        
        const that = this;
        wx.getSystemInfo({
        
          success (res) {
        
            that.setData({
        
              canvasWidth:res.windowWidth,
              canvasHeight:res.windowHeight -50,
              pixelRatio: res.pixelRatio,
            })
          }
        })
      },
    
      uploadImage(){
        
        const that = this;
        wx.chooseMedia({
        
          count: 1,
          mediaType: ['image','video'],
          sourceType: ['album', 'camera'],
          maxDuration: 30,
          camera: 'back',
          success(res) {
        
            that.drawImage(res.tempFiles[0].tempFilePath);
          }
        })
      },
    
      drawImage(src){
        
        const self = this;
        wx.getImageInfo({
        
          src: src,
          success (res) {
        
            const width = self.data.canvasWidth;
            const height = self.data.canvasHeight;
            var innerAspectRadio = res.width / res.height;//图片宽高比
            var customAspectRadio = width / height;//画布宽高比
            let x = 0;
            let y = 0;
            let baseWidth = 0;//图片在画布宽度
            let baseHeight = 0;//图片在画布高度
            if (innerAspectRadio > customAspectRadio) {
        
              baseWidth = width*0.8;
              baseHeight = (width / innerAspectRadio)*0.8;
            } else {
        
              baseWidth = height * innerAspectRadio;
              baseHeight = height;
            }
            x = (width-baseWidth)/2;
            y = (height-baseHeight)/2;
            // 绘制图片
            wx.createSelectorQuery().select('#canvas-1').fields({
         node: true, size: true }).exec((res) => {
        
              // Canvas 对象
              const canvas = res[0].node
              // 渲染上下文
              const ctx = canvas.getContext('2d');
              // 初始化画布大小
              const dpr = self.data.pixelRatio
              canvas.width = width * dpr
              canvas.height = height * dpr
              ctx.scale(dpr, dpr)
              // 开始绘制
              let image = canvas.createImage();//创建iamge实例
              image.src = src;  //引入图片
              image.onload = function () {
        
                ctx.drawImage(image, x, y, baseWidth, baseHeight);
                self.setData({
        
                  point:[[x-10,y-10],[x+baseWidth+10,y-10],[x+baseWidth+10,y+baseHeight+10],[x-10,y+baseHeight+10]]
                },()=>{
        
                  self.pointInit()
                })
              }
            })
          }
        })
      },
    
      pointInit(){
        
        const that = this;
        const query = wx.createSelectorQuery()
        query.select('#canvas-2').fields({
         node: true, size: true }).exec((res) => {
        
          // Canvas 对象
          const canvas = res[0].node
          that.canvas = canvas;
          // 渲染上下文
          const ctx = canvas.getContext('2d');
          that.ctx = ctx;
          // 初始化画布大小
          const dpr = that.data.pixelRatio
          canvas.width = that.data.canvasWidth * dpr
          canvas.height = that.data.canvasHeight * dpr
          ctx.scale(dpr, dpr)
          // 开始绘制
          that.drawPoint(that.data.point)
        })
      },
    
      drawPoint(point){
        
        const ctx = this.ctx;
        const pointRadius = this.data.pointRadius;
        ctx.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeight)
        ctx.beginPath()
        ctx.fillStyle = 'rgb(0, 0, 200)';
        ctx.arc(point[0][0], point[0][1], pointRadius, 0, 2*Math.PI , true)
        ctx.arc(point[1][0], point[1][1], pointRadius, 0, 2*Math.PI , true)
        ctx.fill()
        ctx.beginPath()
        ctx.arc(point[2][0], point[2][1], pointRadius, 0, 2*Math.PI , true)
        ctx.arc(point[3][0], point[3][1], pointRadius, 0, 2*Math.PI , true)
        ctx.fill()
        ctx.beginPath()
        ctx.lineWidth = 4
        ctx.strokeStyle = 'rgba(255,255,255,0.6)';
        ctx.lineJoin = 'round'
        ctx.lineCap = 'round'
        ctx.lineTo(point[0][0], point[0][1])
        ctx.lineTo(point[1][0], point[1][1])
        ctx.lineTo(point[2][0], point[2][1])
        ctx.lineTo(point[3][0], point[3][1])
        ctx.lineTo(point[0][0], point[0][1])
        ctx.stroke()
        ctx.fillStyle = 'rgb(0, 0, 0, 0.5)';
        ctx.fill()
      },
    
      //  手势初始监测
      touchStart: function touchStart (e) {
        
        var that = this;
        var ref = e.touches[0];
        const point = this.data.point;
        const pointRadius = this.data.pointRadius;
        let moveIndex = -1;
        for(var i=0;i<4;i++){
        
          if(ref.x > (point[i][0]-pointRadius) && ref.x < (point[i][0]+pointRadius)){
        
            if(ref.y > (point[i][1]-pointRadius) && ref.y < (point[i][1]+pointRadius)){
        
              moveIndex = i;
              break;
            }
          }
        }
        if(moveIndex!=-1){
        
          that.setData({
        
            moveIndex:moveIndex
          })
        }
      },
    
      //  手势滑动
      touchMove: function touchMove (e) {
        
        var ref = e.touches[0];
        var x = ref.x;
        var y = ref.y;
        if(this.data.moveIndex!=-1){
        
          const point = this.data.point;
          const index = this.data.moveIndex;
          point[index][0] = x;
          point[index][1] = y;
          this.setData({
        
            point:point
          },()=>{
        
            this.drawPoint(point);
          })
        }
      },
    
      // 手势滑动结束
      touchEnd: function touchEnd (e) {
        
        var ref = e.changedTouches[0];
        var x = ref.x;
        var y = ref.y;
        if(this.data.moveIndex!=-1){
        
          const point = this.data.point;
          const index = this.data.moveIndex;
          point[index][0] = x;
          point[index][1] = y;
          this.setData({
        
            point:point,
            moveIndex:-1
          })
        }
      },
    
      getCropperImage(){
        
        const self = this;
        const point = this.data.point;
        wx.createSelectorQuery().select('#canvas-1').fields({
         node: true, size: true }).exec((res) => {
        
          // Canvas 对象
          const canvas = res[0].node
          // 渲染上下文
          const ctx = canvas.getContext('2d');
          // 初始化画布大小
          // const dpr = self.data.pixelRatio
          // canvas.width = self.data.windowWidth * dpr
          // canvas.height = self.data.windowHeight * dpr
          // ctx.scale(dpr, dpr)
          // // 开始绘制
          // ctx.beginPath()
          // ctx.moveTo(point[0][0], point[0][1]);
          // ctx.lineTo(point[1][0], point[1][1]);
          // ctx.lineTo(point[2][0], point[2][1]);
          // ctx.lineTo(point[3][0], point[3][1]);
          // ctx.lineTo(point[0][0], point[0][1]);
          // //先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。
          // ctx.closePath();
          // ctx.fill()
          // ctx.clip()
    
          debugger
          wx.canvasToTempFilePath({
        
            x: 0,
            y: 0,
            width: 200,
            height: 200,
            destWidth: 200,
            destHeight: 200,
            canvasId: 'canvas-1',
            success: function (res) {
        
              debugger
              console.log(res.tempFilePath)
            },
            fail: function (res) {
        
              debugger
              console.log(res)
            },
          },this)
        })
        
      }
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，63人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序实现图片多点裁剪

> 话不多说，直接上代码 1、页面布局 <view class="buttons" style="height: 50px;"> <view

女爷i/ 2023年10月08日 23:49/ 0 赞/ 64 阅读

相关微信小程序生成小程序码图片-【附坑点】

最近做小程序遇到一个功能：从列表进入的详情页面，有生成海报的功能，这个功能用canvas就可以实现，我之前的文章有哦。[附上链接][Link 1] 只是这次的功能上要在海

深碍√TFBOYSˉ_/ 2023年07月07日 12:39/ 0 赞/ 71 阅读

相关微信小程序---实现点击图片预览

单个图片 WXML <image bindtap="preview" data-src="{ {img}}" src="{ {

曾经终败给现在/ 2023年02月18日 04:29/ 0 赞/ 59 阅读

相关微信小程序实现上传多张图片，删除图片

最近在做微信小程序，遇到上传多张图片到服务器，计算上传图片的张数，并且可以手动删除图片，下面是效果图效果图： ![20200609145904640.png][] 本

Bertha 。/ 2023年02月16日 09:25/ 0 赞/ 180 阅读

相关微信小程序图片分包 || 微信小程序资源分包

静态资源处理在分包根目录建一个static包，把资源放进这个static包 pageA --页面1 --页面2 ......

「爱情、让人受尽委屈。」/ 2022年08月29日 05:54/ 0 赞/ 329 阅读

相关微信小程序图片裁剪

插件下载网站[https://github.com/dlhandsome/we-cropper][https_github.com_dlhandsome_we-cropper]

桃扇骨/ 2022年05月31日 10:36/ 0 赞/ 389 阅读

相关微信小程序实现图片轮播

![70][] wxml页面代码：  <view class='swipercontainer'> <swiper in

今天药忘吃喽~/ 2022年05月08日 09:44/ 0 赞/ 319 阅读

相关微信小程序：点击图片预览

做微信小程序的时候使用的图片大小不尽相同，为了让使用者能够浏览原图，就需要给图片添加点击预览的功能，下面我详细介绍一下实现步骤，首先介绍微信小程序文档中的使用教程： ![

妖狐艹你老母/ 2022年04月03日 03:14/ 0 赞/ 711 阅读

相关微信小程序裁剪图片成圆形

> 代码地址如下： > [http://www.demodashi.com/demo/14453.html][http_www.demodashi.com_demo_144

清疚/ 2022年03月10日 08:44/ 0 赞/ 296 阅读

相关微信小程序实现多张图片上传

//app.js uploadimg(data) { var that = this, i = data.i ? data.i

た入场券/ 2021年07月24日 23:15/ 0 赞/ 592 阅读