微信小程序实现九宫格切图，保存功能！

最新推荐文章于 2024-03-23 21:04:27 发布
最新推荐文章于 2024-03-23 21:04:27 发布
阅读量1.5k 收藏 5
点赞数
原文链接：http://www.cnblogs.com/mp1994/p/11142436.html
版权

效果如下图：

 

代码如下:

<view class='sudoku'>
  <scroll-view scroll-x scroll-y class='canvas-box'>
    <canvas canvas-id='canvasIn' id='canvas' class='canvas canvas-in' style='{{canvasWH}}'></canvas>
    <!-- wx:if='{{canvasIn}}' -->
    <!-- <canvas canvas-id='canvasOut' id='canvasOut' class='canvas canvas-out' style='{{canvasWH}}'></canvas> -->
  </scroll-view>
  <cover-view class='imgs'>
    <cover-view class='imgs-box'>
      <cover-image class='img' data-idx='{{index+1}}' src='{{item}}' style='{{maxHeight}}' wx:for='{{imgUrls}}' wx:key='{{index}}' bindtap='saveImg'></cover-image>
    </cover-view>
  </cover-view>
  <cover-view class='btns-box'>
    <button bindtap='uploadImg' class='btn btn-cut'>上传</button>
    <button bindtap='saveAll' class='btn btn-save'>保存</button>
  </cover-view>
</view>
let _this
Page({

  /**
   * 页面的初始数据
   */
  data: {
    canvasWH: '',
    imgW: 0,
    imgH: 0,
    uploadFlag: false,
    imgUrls: [],
    maxHeight: ''
  },

  /* 上传图片 */
  uploadImg() {
    const query = wx.createSelectorQuery()
    query.select('#canvas').boundingClientRect(function(res) {
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        // sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success(res) {
          // 图片大小限制为 最大2M
          const imgSize = res.tempFiles[0].size
          console.log(res, imgSize, '已选择图片大小')

          if (imgSize > 1000000) {
            wx.showModal({
              title: '温馨提示',
              content: '图片最大不能超过1M',
              showCancel: false
            })
            return
          }
          
          const ctx = wx.createCanvasContext('canvasIn')
          const canvasW = res.width
          const canvasH = res.height
          ctx.fillStyle = '#fff'
          ctx.fillRect(0, 0, canvasW, canvasH)
          ctx.draw()

          // 获取图片信息
          wx.getImageInfo({
            src: res.tempFilePaths[0],
            success(imgInfo) {
              console.log(imgInfo, 'imgInfo')
              const imgW = imgInfo.width
              const imgH = imgInfo.height

              _this.setData({
                canvasWH: `width: ${imgW}px;height: ${imgH}px`,
                imgW,
                imgH
              })

              //  获取图片的大小
              ctx.drawImage(res.tempFilePaths[0], 0, 0, imgW, imgH)
              ctx.draw()
              //  展示新图片
              _this.showMiniImg()
            },
            fail(err) {
              console.log(err, '图片信息获取失败')
              wx.showModal({
                title: '温馨提示',
                content: '暂不支持此图片格式',
                showCancel: false
              })
            }
          })
        },
        fail (err) {
          console.log(err, '图片选择失败')
        }
      })
    })
    query.exec()
  },

  /* 展示小图 */
  showMiniImg() {
    let x = 0
    let y = 0
    let count = 0
    let imgUrls = []
    const {
      imgW,
      imgH
    } = _this.data

    const cutW = imgW / 3
    const cutH = imgH / 3

    const cfgSave = {
      x: 0,
      y: 0,
      width: cutW,
      height: cutH,
      destWidth: cutW,
      destHeight: cutH,
      canvasId: 'canvasIn'
    }
    _this.cutFlag = true

    const timer = setInterval(() => {
      if (_this.cutFlag) {
        _this.cutFlag = false
        console.log(count, 'cutFlag')
        switch (count) {
          case 0:
            x = 0
            y = 0
            break
          case 1:
            x = 1
            y = 0
            break
          case 2:
            x = 2
            y = 0
            break
          case 3:
            x = 0
            y = 1
            break
          case 4:
            x = 1
            y = 1
            break
          case 5:
            x = 2
            y = 1
            break
          case 6:
            x = 0
            y = 2
            break
          case 7:
            x = 1
            y = 2
            break
          case 8:
            x = 2
            y = 2
            break
          default:
            break
        }
        cfgSave.x = cutW * x
        cfgSave.y = cutH * y

        wx.canvasToTempFilePath({
          ...cfgSave,
          success(res) {
            console.log(res, '剪切')

            _this.cutFlag = true
            count++
            wx.showLoading({
              title: `裁剪中 ${count}/9`,
              mask: true
            })
            imgUrls.push(res.tempFilePath)
            if (count == 9) {
              if (imgUrls.length < 9) {
                imgUrls = []
                cut()
                return
              }
              wx.hideLoading()
              _this.setData({
                uploadFlag: true,
                imgUrls
              })
              clearInterval(timer)
            }
          },
          fail (err) {
            console.log(err , '剪切图片失败')
          }
        })
      }
    }, 100)
  },

  /* 保存图片(单图 / 所有) */
  saveImgHandle(e) {
    const {
      imgW,
      imgH,
      imgUrls
    } = _this.data

    const cutW = imgW / 3
    const cutH = imgH / 3

    const cfgSave = {
      x: 0,
      y: 0,
      width: cutW,
      height: cutH,
      destWidth: cutW,
      destHeight: cutH,
      canvasId: 'canvasIn',
    }

    if (e) { //保存单张图片
      switch (e.currentTarget.dataset.idx) {
        case 1:
          cfgSave.x = cutW * 0
          cfgSave.y = cutH * 0
          break
        case 2:
          cfgSave.x = cutW * 1
          cfgSave.y = cutH * 0
          break
        case 3:
          cfgSave.x = cutW * 2
          cfgSave.y = cutH * 0
          break
        case 4:
          cfgSave.x = cutW * 0
          cfgSave.y = cutH * 1
          break
        case 5:
          cfgSave.x = cutW * 1
          cfgSave.y = cutH * 1
          break
        case 6:
          cfgSave.x = cutW * 2
          cfgSave.y = cutH * 1
          break
        case 7:
          cfgSave.x = cutW * 0
          cfgSave.y = cutH * 2
          break
        case 8:
          cfgSave.x = cutW * 1
          cfgSave.y = cutH * 2
          break
        case 9:
          cfgSave.x = cutW * 2
          cfgSave.y = cutH * 2
          break
        default:
          break
      }
      wx.canvasToTempFilePath({
        ...cfgSave,
        success(res) {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success(resPhoto) {
              wx.showToast({
                title: '保存成功'
              })
            }
          })
        }
      })
    } else { //保存所有
      let pathArr = []
      let x = 0
      let y = 0
      let count = 0
      _this.saveFlag = true

      const timer = setInterval(() => {
        if (_this.saveFlag) {

          _this.saveFlag = false
          console.log(count, 'saveFlag')
          switch (count) {
            case 0:
              x = 0
              y = 0
              break
            case 1:
              x = 1
              y = 0
              break
            case 2:
              x = 2
              y = 0
              break
            case 3:
              x = 0
              y = 1
              break
            case 4:
              x = 1
              y = 1
              break
            case 5:
              x = 2
              y = 1
              break
            case 6:
              x = 0
              y = 2
              break
            case 7:
              x = 1
              y = 2
              break
            case 8:
              x = 2
              y = 2
              break
            default:
              break
          }
          cfgSave.x = cutW * x
          cfgSave.y = cutH * y
          wx.canvasToTempFilePath({
            ...cfgSave,
            success(res) {
              console.log(res, '保存所有')

              pathArr.push(res.tempFilePath)
              count++
              wx.showLoading({
                title: `保存中${count}/9`,
              })
              _this.saveFlag = true
              if (count == 9) {
                clearInterval(timer)
                console.log(pathArr)
                // 保存到相册
                for (let i = 0; i < pathArr.length; i++) {
                  wx.saveImageToPhotosAlbum({
                    filePath: pathArr[i],
                    success(resPhoto) {
                      _this.saveFlag = true
                      if (i == pathArr.length - 1) {
                        wx.hideLoading()
                        wx.showToast({
                          title: '保存成功'
                        })
                      }
                    }
                  })
                }
              }
            }
          })
        }
      }, 100)
    }
  },

  /* 保存单张图片 */
  saveImg(e) {
    const {
      uploadFlag
    } = _this.data
    // 判断是否已上传图片
    if (uploadFlag) {
      wx.showModal({
        title: '温馨提示',
        content: '要将该图片保存到相册吗？',
        success(confirm) {
          if (confirm.confirm) {
            _this.photoAuthorization(e)
          }
        }
      })

    } else {
      wx.showModal({
        title: '温馨提示',
        content: '请先上传图片',
        showCancel: false
      })
    }

  },

  /* 一键保存 */
  saveAll() {
    const {
      uploadFlag
    } = _this.data
    // 判断是否已上传图片
    if (uploadFlag) {
      _this.photoAuthorization()
    } else {
      wx.showModal({
        title: '温馨提示',
        content: '请先上传图片',
        showCancel: false
      })
    }
  },

  /* 设置显示图片的最大高度为屏幕高 */
  setMaxHeight() {
    wx.getSystemInfo({
      success: function(res) {
        console.log(res)
        const windowH = res.windowHeight
        const maxHeight = parseInt(windowH / 3)
        _this.setData({
          maxHeight: `max-height: ${maxHeight}px`
        })
      },
    })
  },

  /* 相册授权 */
  photoAuthorization(event) {
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.writePhotosAlbum']) {
          // 已授权
          if (event) {
            _this.saveImgHandle(event)
          } else {
            _this.saveImgHandle()
          }
        } else {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              // 已授权
              if (event) {
                _this.saveImgHandle(event)
              } else {
                _this.saveImgHandle()
              }
            },
            fail() {
              // 未授权
              wx.showModal({
                title: '温馨提示',
                content: '需要获取相册权限',
                success(resOpenSetting) {
                  if (resOpenSetting.confirm) {
                    wx.openSetting({
                      success(res) {
                        if (res.authSetting['scope.writePhotosAlbum']) {
                          // 已授权
                          if (event) {
                            _this.saveImgHandle(event)
                          } else {
                            _this.saveImgHandle()
                          }
                        } else {
                          wx.showModal({
                            title: '温馨提示',
                            content: '未获取到授权信息',
                            showCancel: false
                          })
                        }
                      }
                    })
                  }
                }
              })
            }
          })
        }
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    _this = this
    _this.setMaxHeight()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})
page {
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}

.sudoku {
  height: 100%;
}

.canvas-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.canvas {
  min-width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.canvas-in {
  z-index: 0;
}

.canvas-out {
  z-index: 99;
  background-color: #fff;
}

.imgs{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 999;
  background-color: #fff;
}

.imgs-box{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 8rpx;
  box-sizing: border-box;
}

.img{
  flex-shrink: 0;
  width: 33.3%;
  padding: 5rpx;
  box-sizing: border-box;
}

.btns-box {
  position: fixed;
  right: 30rpx;
  bottom: 120rpx;
  z-index: 999;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  height: 300rpx;
}

.btn {
  color: #fff;
  width: 100rpx;
  height: 100rpx;
  border: none;
  border-radius: 50%;
}

.wx-button-cover-view-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wx-button-cover-view-inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn::after {
  border: none;
}

.btn-cut {
  background-color: rgba(44, 42, 165, 0.5);
}

.btn-save {
  background-color: rgba(200, 240, 56, 0.5);
}

转载于:https://www.cnblogs.com/mp1994/p/11142436.html

weixin_30367169
关注
【Uniapp微信小程序】图片左右分割/分割线切割图片/图片批量分割线切割
cnsv的博客
06-26 729
uniapp微信小程序图片左右分割切割方法组件，使用分割线分割，默认分割线中间
用canvas实现九宫格切图之手把手教学（uniapp+ts）
qq_44604051的博客
04-12 2240
uniapp用canvas实现九宫格切图（typescript）前言上传图片展示图片画布下载图片总结 前言 这几天工作比较轻松，所以就有时间发下呆，突然想起前段时间用了一个九宫格切图软件，所以就自己试着开发下，期间不少问题也是问领导的，领导知道我在摸鱼但也很耐心帮我（受宠若惊），所以在这里谢谢他。 上传图片 handleUpload(): void { uni.chooseImage({ sizeType: ['original'], success: (chooseI
微信小程序前端自动切片工具软件
03-20
1.切片功能：原来手工写的这部分工作，可以用切片软件的方法来切。切好后，可以自动生成wxml,wcss,js文件。 2.文字识别功能：效果图上的文字可以通过自动文字自动识别识别出来，提高录入速度，减轻工作量。 3.存档功能：设计好的切片文件可以存档，以便下次编辑。只要有切片文件在，换了程序员也可以修改和编辑。
小程序之图片裁剪(圆形、矩形)
最新发布
qq_42238378的博客
03-23 958
这个裁剪方法可以裁剪圆形、矩形，可以二开，放心食用。
微信小程序自动切片生成布局软件
03-17
微信小程序自动切片生成布局软件是一款根据效果图像画画一样来设计微信小程序，自动生成导出前端页面的快速开发工具。可以很方便、快速地生成小程序的wxml,wcss,js文件。可以大大提高您的工作效率，减少前端布局的编写工作。 功能如下： 1.切片功能：原来手工写的这部分工作，可以用切片软件的方法来切。切好后，可以自动生成wxml,wcss,js文件。 2.文字识别功能：效果图上的文字可以通过自动文字自动识别识别出来，提高录入速度，减轻工作量。 3.存档功能：设计好的切片文件可以存档，以便下次编辑。只要有切片文件在，换了程序员也可以修改和编辑。
微信小程序之本地生活（九宫格）
qq_62512326的博客
10-09 2454
在app.json中删除其他页面 将index改为grid 自动生成新的文件。看不见图片，但是可以看见指示点在动，是因为还未设置图片。设置WXSS,让轮播图照片显现出来。创建新的项目，名称为：本地生活。预览效果，图片还未规则。
2023新版 多功能去水印工具微信小程序源码-带流量主功能
05-16
2023新版 多功能去水印工具微信小程序源码_带流量主功能 自带去水印接口的多功能小程序 支持各大平台短视频去水印 支持保存封面,图集,标题等等 ...支持九宫格切图 支持修改视频的MD5等等 另外当然也有流量主功能的
新版 多功能去水印工具微信小程序源码-带流量主功能
03-20
简介： 2023新版 多功用去水印工具微信小程序源码_带流量主功用 自带去水印接口的多功用小程序 支持各大平台短视频去水印 ...支持九宫格切图 支持修正视频的MD5等等 另外当然也有流量主功用的
全新云开发工具箱：融合多项功能的微信小程序源码
11-07
这些功能包括证件照制作、垃圾分类查询、个性签名制作、二维码生成、文字九宫格、手持弹幕、照片压缩、照片编辑、照片裁剪、照片拼图、长图拼接、图片格式转换、图片批量加文字、图片加马赛克、图片文字识别、九宫格...
微信小程序：拼图工具箱
06-16
九宫格切图(就是把一张图切割成九宫格小图) 九宫格拼图(就是把九张图拼成一张图) 心形图制作(也就是把多张图拼成心形状态) 文字九宫格(也就是DIY文字拼凑成九宫格) 多图横向拼接(也就是多张图左右拼接起来,就比如...
javascript+canvas制作九宫格小程序
10-24
主要介绍了javascript+canvas制作九宫格小程序，效果非常棒，这里推荐给有需要的小伙伴们
微信小程序 canvas绘图 实现图片拉伸、压缩与裁剪
mossbaoo的博客
12-22 9001
在canvas绘图时，通常会遇到的一种情况是用固定宽高来显示图片，如果直接把图片内容填充进去的话，显示出来的图片就会被压扁或者被挤瘦，其效果简直不忍直视！那么，就需要把图片进行拉伸、压缩或裁剪。 接下来，先给 drawImage 做个介绍： canvas的drawImage函数可以 绘制图像到画布。 它有以下参数： 参数 类型 说明 imageResource ...
Python实现将一张图片切成9宫格
guihunkun的博客
07-07 856
文章目录前言程序结果1. 原图2. 九宫格 前言 各种拍照App都有将一张图片切成9宫格的功能，其内置算法也没有多复杂，无非图片在非正方形的情况下先填充成正方形，然后3*3切割即可。具体代码可以去我的GitHub网站下载。 程序 # -*- coding: utf-8 -*- from PIL import Image import sys #将图片填充为正方形 def fill_image(image): width, height = image.size #选取长和宽中较大值作为
微信小程序使用canvas制作拼图动画
jinxi1112的博客
07-15 1065
效果如上图 制作思路： 1. 制作9个由特殊图形拼成的九宫格，包含模糊和彩色高亮 2.生成的拼图进行一系列路径动画（蓄能弹起效果） 3.将生成的拼图拼贴在对应的位置上，并产生破碎动画特效 技术实现思路： 1.将拼图图片利用canvas rgb通道方法制作成模糊灰度图，参考博文https://blog.csdn.net/sunzhibin1/article/details/82387926 2.制作九宫格拼图 <view class="canvas-wrap..
最新九宫格心形拼图微信小程序源码+带流量主
ewgeths的博客
07-23 727
九宫格心形拼图小程序源码，带流量主微信小程序源码。可以自定义拼图形状，保存张数自由填充图片、自由剪裁图片等。并带有流量主广告位，有需要的可以下载看看。
微信彩色个性昵称 游戏取名 九宫格切图 多图拼接工具箱微信小程序源码
linxiaoming6的博客
08-16 2200
简介： 流量主系列，没有后台，直接上传小程序就能使用了 这是一款多功能工具箱小程序! 目前由N款小功能组合成 比如: 图片拼接 九宫格切图 透明昵称 文字表情 等等上面说的只是一部分 该款小程序无需服务器与域名。 网盘下载地址： http://kekewangLuo.cc/dvDmdMspsVP0 图片： ...
PC网页实现九宫格切图功能
weixin_30598225的博客
07-04 549
暂未完成 转载于:https://www.cnblogs.com/mp1994/p/11133472.html
【记录】微信小程序实现九宫格图片拖拽
未来可期
09-15 4289
实现原生小程序图片上传、预览、拖拽换位置
微信小程序flex布局基础详解
切图仔
05-17 712
wxml: &lt;!--index.wxml--&gt; &lt;view class="container"&gt; &lt;view class='item'&gt;1&lt;/view&gt; &lt;view class='item'&gt;2&lt;/view&gt; &lt;view class='item i3'&gt;3&lt;/vi
微信小程序云开发多功能工具箱
- 文字转图片、九宫格切图等：这些功能可以将文字信息可视化，制作成图像。 - 计算器系列：提供各类生活、工作中的计算器，如房贷、个税、复利等。 - 日期日历计算器：方便用户进行日期的计算和管理。 - 其他...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值