小程序利用canvas实现一键保存图片功能（合并图片，双指缩放，旋转，默认裁剪画布大小的尺寸）

最新推荐文章于 2025-06-07 10:24:25 发布

原创

最新推荐文章于 2025-06-07 10:24:25 发布 · 2.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #裁剪 #合并 #缩放 #小程序

该博客详细介绍了如何在小程序中利用canvas技术进行一键保存图片操作，包括合并图片、双指缩放和旋转功能。同时，文章提供了默认裁剪画布大小的尺寸设置方法，并展示了两种不同的实现效果，支持图片的旋转、放大和缩小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**css **

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}
.img {
   position: absolute;
   top: 5%;
   left: 50%;
   transform: translateX(-50%);
   overflow: hidden;
   background: #eee;
}
.img image {
  height:400px;
}
.imgcrop {
   position: absolute;
  left: -50000rpx;
  top: -500000rpx; 
}
.footer {
  position: fixed;
  width: 100%;
  height: 110rpx;
  color: red;
  background: #000;
  bottom: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 130%;
}
.footer view {
  width: 30%;
  text-align: center;
}
.background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}

HTML

<view class="container">
  <!--  剪裁框与初始图片，剪裁框监听用户手势，获取移动缩放旋转值，images通过css样式显示变化  -->
  <view class="img" style="width:{
  
  { width }}px; height:{
  
  {height}}px" catchtouchstart="touchstartCallback"  catchtouchmove="touchmoveCallback" catchtouchend="touchendCallback"  >
    <image style="transform: translate({
  
  {stv.offsetX}}px, {
  
  {stv.offsetY}}px) scale({
  
  {stv.scale}}) rotate({
  
  { stv.rotate }}deg);width:{
  
  {originImg.width}}px; height: {
  
  {originImg.height}}px" src="{
  
  { originImg.url }}"></image>
  </view>
  <view class='footer'>
      <view bindtap='uploadTap'>选择图片</view> 
      <view bindtap='rotate'>旋转</view>
      <view bindtap='cropperImg'>打印</view>
  </view>
  
  <!--  canvas长宽设为初始图片设置的长款的两倍，使剪裁得到的图片更清晰，也不至于过大  -->
  <canvas class='imgcrop' style="width:{
  
  {canvasWidth}}px; height: {
  
  {canvasHeight}}px" canvas-id='imgcrop'></canvas>
</view>

JS
注：77.png或者66.png更改成自己的图片URL，如果只需要一张图片去掉77.png或者66.png这段代码

const device = wx.getSystemInfoSync();
const app = getApp();
var mun = -1;
var initImgPaht='';
var widthRadio = '';
var heightRadio = '';
var twoPoint = {
  x1: 0,
  y1: 0,
  x2: 0,
  y2: 0
}

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    ratio: {
      type: Number,
      observer: function (newVal, oldVal) {
        this.setData({
          width: device.windowWidth * 0.8,
          height: device.windowWidth * 0.8 / newVal
        })
      }
    },
    url: {
      type: String,
      observer ( newVal, oldVal ) {
        this.initImg( newVal )
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    width: device.windowWidth * 0.8,                //剪裁框的宽度
    height: device.windowWidth * 0.8 / (102 / 152), //剪裁框的长度
    originImg: null,                                //存放原图信息
    canvasWidth: device.windowWidth,
    canvasHeight: device.windowWidth,
    stv: {
      offsetX: 0,                                   //剪裁图片左上角坐标x
      offsetY: 0,                                   //剪裁图片左上角坐标y
      zoom: false,                                  //是否缩放状态
      distance: 0,                                  //两指距离
      scale: 1,                                     //缩放倍数
      rotate: 0                                     //旋转角度
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    uploadTap() {
      let _this = this
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success(res) {
          _this.initImg( res.tempFilePaths[0]);
        }
      })
    },
    rotate() {
      let _this = this;
      _this.setData({
        'stv.rotate': _this.data.stv.rotate % 90 == 0 ? _this.data.stv.rotate = _this.data.stv.rotate + 90 : _this.data.stv.rotate = 0
      })
      if (_this.data.stv.rotate == 360) {
        _this.data.stv.rotate = 0;
      }
    },
    // canvas剪裁图片
    cropperImg(