百度360必应搜狗淘宝本站头条
mqtt服务器xftp6mybatiscollectionkeyerrorc#var
当前位置：网站首页 > 热门文章 > 正文

微信小程序实现多图片旋转、放大、缩小

bigegpt 2024-08-03 11:35 14 浏览

微信小程序实现多图片旋转、放大、缩小。

想做一个大头贴的功能，本来使用的腾讯AI接口已经实现了，最近接口不能调用，重新找技术，参考网上的提供的代码（https://github.com/peng20017/wx-drop），修改了一些效果和代码，最终实现了多图片上传、旋转等功能。配合我的上一篇文章，可以实现更多的效果，喜欢的可以收藏关注一下，效果图如下：


代码如下：

let index = 0,items = [],flag = true,itemId = 1;
const hCw = 1.62; // 图片宽高比
const canvasPre = 1; // 展示的canvas占mask的百分比
const maskCanvas = wx.createCanvasContext('maskCanvas');
Page({
  /**
   * 页面的初始数据
   */
  data: {
    itemList: [],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    items = this.data.itemList;
    this.drawTime = 0
    // this.setDropItem({
    //   url: '/images/1.png'
    // });
    // this.setDropItem({
    //   url: '/images/1.png'
    // });
    wx.getSystemInfo({
      success: sysData => {
        this.sysData = sysData
        this.setData({
          canvasWidth: this.sysData.windowWidth * canvasPre, // 如果觉得不清晰的话，可以把所有组件、宽高放大一倍
          canvasHeight: this.sysData.windowWidth * canvasPre * hCw,
        })
      }
    })
  },
  addImage(e){
    let that = this;
    wx.chooseImage({
      count: 3, //选择照片的数量
      sizeType: ['original'],
      sourceType: ['album', 'camera'],
      success(res) {
        const tempFilePaths = res.tempFilePaths
        let posHeight = 200,posLeft = 200;
        res.tempFilePaths.forEach(function(item, index){
          let imgData = {
            url: item,
            top:index * posHeight,
            left: ((index+1) % 2 === 0 ? 200 : 0)
          }
          that.setDropItem(imgData);  
        })
      },
      complete(){
        
      },
      fail(){
        wx.hideLoading()
      }
    })
  },
  setDropItem(imgData) {
    let data = {}
    wx.getImageInfo({
      src: imgData.url,
      success: res => {
        // 初始化数据
        data.width = 150; //宽度
        data.height =150; //高度
        data.image = imgData.url; //地址
        data.id = ++itemId; //id
        data.top = imgData.top; //top定位
        data.left = imgData.left; //left定位
        //圆心坐标
        data.x = data.left + data.width / 2;
        data.y = data.top + data.height / 2;
        data.scale = 1; //scale缩放
        data.oScale = 1; //方向缩放
        data.rotate = 1; //旋转角度
        data.active = false; //选中状态
        console.log(data)
        items[items.length] = data;
        this.setData({
          itemList: items
        })
      }
    })
  },
  WraptouchStart: function(e) {
    for (let i = 0; i < items.length; i++) {
      items[i].active = false;
      if (e.currentTarget.dataset.id == items[i].id) {
        index = i;
        items[index].active = true;
      }
    }
    this.setData({
      itemList: items
    })

    items[index].lx = e.touches[0].clientX;
    items[index].ly = e.touches[0].clientY;

    console.log(items[index])
  },
  WraptouchMove(e) {
    if (flag) {
      flag = false;
      setTimeout(() => {
        flag = true;
      }, 100)
    }
    // console.log('WraptouchMove', e)
    items[index]._lx = e.touches[0].clientX;
    items[index]._ly = e.touches[0].clientY;

    items[index].left += items[index]._lx - items[index].lx;
    items[index].top += items[index]._ly - items[index].ly;
    items[index].x += items[index]._lx - items[index].lx;
    items[index].y += items[index]._ly - items[index].ly;

    items[index].lx = e.touches[0].clientX;
    items[index].ly = e.touches[0].clientY;
    console.log(items)
    this.setData({
      itemList: items
    })
  },
  WraptouchEnd() {
    this.synthesis()
  },
  oTouchStart(e) {
    //找到点击的那个图片对象，并记录
    for (let i = 0; i < items.length; i++) {
      items[i].active = false;
      if (e.currentTarget.dataset.id == items[i].id) {
        console.log('e.currentTarget.dataset.id', e.currentTarget.dataset.id)
        index = i;
        items[index].active = true;
      }
    }
    //获取作为移动前角度的坐标
    items[index].tx = e.touches[0].clientX;
    items[index].ty = e.touches[0].clientY;
    //移动前的角度
    items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index].ty)
    //获取图片半径
    items[index].r = this.getDistancs(items[index].x, items[index].y, items[index].left, items[index].top);
    console.log(items[index])
  },
  oTouchMove: function(e) {
    if (flag) {
      flag = false;
      setTimeout(() => {
        flag = true;
      }, 100)
    }
    //记录移动后的位置
    items[index]._tx = e.touches[0].clientX;
    items[index]._ty = e.touches[0].clientY;
    //移动的点到圆心的距离
    items[index].disPtoO = this.getDistancs(items[index].x, items[index].y, items[index]._tx, items[index]._ty - 10)

    items[index].scale = items[index].disPtoO / items[index].r;
    items[index].oScale = 1 / items[index].scale;

    //移动后位置的角度
    items[index].angleNext = this.countDeg(items[index].x, items[index].y, items[index]._tx, items[index]._ty)
    //角度差
    items[index].new_rotate = items[index].angleNext - items[index].anglePre;

    //叠加的角度差
    items[index].rotate += items[index].new_rotate;
    items[index].angle = items[index].rotate; //赋值

    //用过移动后的坐标赋值为移动前坐标
    items[index].tx = e.touches[0].clientX;
    items[index].ty = e.touches[0].clientY;
    items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index].ty)

    //赋值setData渲染
    this.setData({
      itemList: items
    })

  },
  getDistancs(cx, cy, pointer_x, pointer_y) {
    var ox = pointer_x - cx;
    var oy = pointer_y - cy;
    return Math.sqrt(
      ox * ox + oy * oy
    );
  },
  /*
   *参数1和2为图片圆心坐标
   *参数3和4为手点击的坐标
   *返回值为手点击的坐标到圆心的角度
   */
  countDeg: function(cx, cy, pointer_x, pointer_y) {
    var ox = pointer_x - cx;
    var oy = pointer_y - cy;
    var to = Math.abs(ox / oy);
    var angle = Math.atan(to) / (2 * Math.PI) * 360;
    // console.log("ox.oy:", ox, oy)
    if (ox < 0 && oy < 0) //相对在左上角，第四象限，js中坐标系是从左上角开始的，这里的象限是正常坐标系  
    {
      angle = -angle;
    } else if (ox <= 0 && oy >= 0) //左下角,3象限  
    {
      angle = -(180 - angle)
    } else if (ox > 0 && oy < 0) //右上角，1象限  
    {
      angle = angle;
    } else if (ox > 0 && oy > 0) //右下角，2象限  
    {
      angle = 180 - angle;
    }
    return angle;
  },
  deleteItem: function(e) {
    let newList = [];
    for (let i = 0; i < items.length; i++) {
      if (e.currentTarget.dataset.id != items[i].id) {
        newList.push(items[i])
      }
    }
    if (newList.length > 0) {
      newList[newList.length - 1].active = true;
    }
    items = newList;
    this.setData({
      itemList: items
    })
  },
  openMask () {
    if (this.drawTime == 0) {
      this.synthesis()
    }
    this.setData({
      showCanvas: true
    })
  },
  synthesis() { // 合成图片
    this.drawTime = this.drawTime + 1
    console.log('合成图片')
    maskCanvas.save();
    maskCanvas.beginPath();
    //一张白图  可以不画
    maskCanvas.setFillStyle('#fff');
    maskCanvas.fillRect(0, 0, this.sysData.windowWidth, this.data.canvasHeight)
    maskCanvas.closePath();
    maskCanvas.stroke();

    //画背景 hCw 为 1.62 背景图的高宽比
    maskCanvas.drawImage('/images/bg.png', 0, 0, this.data.canvasWidth, this.data.canvasHeight);
    /*
        num为canvas内背景图占canvas的百分比，若全背景num =1
        prop值为canvas内背景的宽度与可移动区域的宽度的比，如一致，则prop =1;
       */
    //画组件
    const num = 1,
      prop = 1;
    items.forEach((currentValue, index) => {
      maskCanvas.save();
      maskCanvas.translate(this.data.canvasWidth * (1 - num) / 2, 0);
      maskCanvas.beginPath();
      maskCanvas.translate(currentValue.x * prop, currentValue.y * prop); //圆心坐标
      maskCanvas.rotate(currentValue.angle * Math.PI / 180);
      maskCanvas.translate(-(currentValue.width * currentValue.scale * prop / 2), -(currentValue.height * currentValue.scale * prop / 2))
      maskCanvas.drawImage(currentValue.image, 0, 0, currentValue.width * currentValue.scale * prop, currentValue.height * currentValue.scale * prop);
      maskCanvas.restore();
    })
    maskCanvas.draw(false, (e) => {
      wx.canvasToTempFilePath({
        canvasId: 'maskCanvas',
        success: res => {
          console.log('draw success')
          console.log(res.tempFilePath)
          this.setData({
            canvasTemImg: res.tempFilePath
          })
        }
      }, this)
    })
  },
  disappearCanvas() {
    this.setData({
      showCanvas: false
    })
  },
  saveImg: function() {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.canvasTemImg,
      success: res => {
        wx.showToast({
          title: '保存成功',
          icon: "success"
        })
      },
      fail: res => {
        console.log(res)
        wx.openSetting({
          success: settingdata => {
            console.log(settingdata)
            if (settingdata.authSetting['scope.writePhotosAlbum']) {
              console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
            } else {
              console.log('获取权限失败，给出不给权限就无法正常使用的提示')
            }
          },
          fail: error => {
            console.log(error)
          }
        })
        wx.showModal({
          title: '提示',
          content: '保存失败，请确保相册权限已打开',
        })
      }
    })
  }
})
/**index.wxss**/
.bg {
  width: 100%;
  height: 100vh;
}
.contentWarp{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /* background-color: #d1e3f1; */
}
.touchWrap{
    transform-origin: center;
    position: absolute;
    z-index: 100;
}

.imgWrap {
    box-sizing: border-box;
    width: 100%;
    transform-origin: center;
    float: left;
    border: 5rpx transparent dashed;
}
.imgWrap image {
    float: left;
}
.touchActive .x {
    display: block;
}

.touchActive .o {
    display: block;
}

.x {
    position: absolute;
    top: -25rpx;
    left: -25rpx;
    z-index: 500;
    display: none;
    width: 50rpx;
    height: 50rpx;
    overflow: hidden;
    font-weight: bold;
    color: #d1e3f1;
}
.o {
    position: absolute;
    bottom: -25rpx;
    right: -25rpx;
    width: 50rpx;
    height: 50rpx;
    text-align: center;
    display: none;
    overflow: hidden;
    font-weight: bold;
    color: #d1e3f1;
}
.active {
    background-color: rgb(78, 114, 151);
}

.active view {
    border: none;
}
.touchActive {
    /* border: 4rpx #fff dashed; */
    z-index: 400;
}
.fixed {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}


.canvasWrap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    text-align: center;
}

.maskCanvas {
    position: absolute;
    left: -200%;
    top: 0;
}

.btn {
    font-size: 30rpx;
    color: #81b7c4;
    border: 3rpx solid #81b7c4;
    background-color: #fff;
    line-height: 90rpx;
    width: 50%;
    margin-top: 20rpx;
    height: 90rpx;
}

.btnView view {
    padding-bottom: 20rpx;
}

.hand {
    position: absolute;
    left: 100rpx;
    right: 0;
    margin: auto;
    z-index: 100;
}

.getUserInfoBtn {
    position: initial;
    border: none;
    background-color: none;
}

.getUserInfoBtn::after {
    border: none;
}

.btn_view {
    display: flex;
    padding: 20rpx;
}

.btn_view button {
    width: 300rpx;
    font-size: 30rpx;
    color: #81b7c4;
    border: 3rpx solid #81b7c4;
    background-color: #fff;
    line-height: 90rpx;
}

.resImg {
  width: 75%;
  margin-top: 10px;
}
<view class="container">
  <image class="bg" src="/images/bg.png"></image>
  <view class='contentWarp'>
    <!-- *************操作区域*************  -->
    <block wx:for="{{itemList}}" wx:key="{{item.id}}">

      <view class='touchWrap' style='transform: scale({{item.scale}});top:{{item.top}}px;left:{{item.left}}px; z-index:{{item.active?100:1}}'>
        <view class='imgWrap {{item.active? "touchActive":""}}' style="transform: rotate({{item.angle}}deg); border: {{item.active?4*item.oScale:0}}rpx #fff dashed;">
          <image src='{{item.image}}' data-id='{{item.id}}' style='width:{{item.width}}px;height:{{item.height}}px;' bindtouchstart='WraptouchStart' bindtouchmove='WraptouchMove' bindtouchend='WraptouchEnd'></image>
          <image class='x' src='../../images/x.png' style='transform: scale({{item.oScale}});transform-origin:center;' data-id='{{item.id}}' bindtap='deleteItem'></image>
          <image class='o' src='../../images/o.png' style='transform: scale({{item.oScale}});transform-origin:center;' data-id='{{item.id}}' bindtouchstart='oTouchStart' bindtouchmove='oTouchMove' bindtouchend='WraptouchEnd'></image>
        </view>
      </view>
    </block>
  </view>
  <!-- **************操作区域************  -->
  <view class="fixed" style="margin-bottom:20px">
    <button bindtap="addImage" style="width:45%;heigth:45px;float:left;margin-left:15px">选择照片</button>
    <button class="custom-button" bindtap="openMask" type="primary" style="width:45%;heigth:45px;margin-top:0">预览照片</button>
  </view>

  <view class='canvasWrap' hidden="{{!showCanvas}}">
    <image class="resImg" bindlongtap="saveImg" src="{{canvasTemImg}}" mode="widthFix"></image>
    <view class='btn_view'>
      <button bindtap='saveImg'>保存到手机</button>
      <button bindtap='disappearCanvas'>关闭</button>
    </view>
  </view>

  <!-- bug点：一定不要用if hidden 隐藏canvas会导致很多api调用bug -->
  <canvas class='maskCanvas' canvas-id="maskCanvas" style='width:{{canvasWidth}}px; height:{{canvasHeight}}px;'></canvas>
  
</view>

相关推荐

当Frida来“敲”门（frida是什么）

0x1渗透测试瓶颈目前，碰到越来越多的大客户都会将核心资产业务集中在统一的APP上，或者对自己比较重要的APP，如自己的主业务，办公APP进行加壳，流量加密，投入了很多精力在移动端的防护上。而现在挖...

服务端性能测试实战3-性能测试脚本开发

前言在前面的两篇文章中，我们分别介绍了性能测试的理论知识以及性能测试计划制定，本篇文章将重点介绍性能测试脚本开发。脚本开发将分为两个阶段：阶段一：了解各个接口的入参、出参，使用Python代码模拟前端...

Springboot整合Apache Ftpserver拓展功能及业务讲解(三)

今日分享每天分享技术实战干货，技术在于积累和收藏，希望可以帮助到您，同时也希望获得您的支持和关注。架构开源地址：https://gitee.com/msxyspringboot整合Ftpserver参...

Linux和Windows下:Python Crypto模块安装方式区别

一、Linux环境下：fromCrypto.SignatureimportPKCS1_v1_5如果导包报错：ImportError:Nomodulenamed'Crypt...

Python 3 加密简介（python des加密解密）

Python3的标准库中是没多少用来解决加密的，不过却有用于处理哈希的库。在这里我们会对其进行一个简单的介绍，但重点会放在两个第三方的软件包：PyCrypto和cryptography上，我...

怎样从零开始编译一个魔兽世界开源服务端Windows

第二章：编译和安装我是艾西，上期我们讲述到编译一个魔兽世界开源服务端环境准备，那么今天跟大家聊聊怎么编译和安装我们直接进入正题（上一章没有看到的小伙伴可以点我主页查看）编译服务端：在D盘新建一个文件夹...

附1-Conda部署安装及基本使用（conda安装教程）

Windows环境安装安装介质下载下载地址：https://www.anaconda.com/products/individual安装Anaconda安装时，选择自定义安装，选择自定义安装路径：配置...

如何配置全世界最小的 MySQL 服务器

配置全世界最小的MySQL服务器——如何在一块IntelEdison为控制板上安装一个MySQL服务器。介绍在我最近的一篇博文中，物联网，消息以及MySQL，我展示了如果Partic...

如何使用Github Action来自动化编译PolarDB-PG数据库

随着PolarDB在国产数据库领域荣膺桂冠并持续获得广泛认可，越来越多的学生和技术爱好者开始关注并涉足这款由阿里巴巴集团倾力打造且性能卓越的关系型云原生数据库。有很多同学想要上手尝试，却卡在了编译数据...

面向NDK开发者的Android 7.0变更（ndk android.mk）

订阅Google官方微信公众号：谷歌开发者。与谷歌一起创造未来！受Android平台其他改进的影响，为了方便加载本机代码，AndroidM和N中的动态链接器对编写整洁且跨平台兼容的本机...

信创改造--人大金仓(Kingbase)数据库安装、备份恢复的问题纪要

问题一：在安装KingbaseES时，安装用户对于安装路径需有“读”、“写”、“执行”的权限。在Linux系统中，需要以非root用户执行安装程序，且该用户要有标准的home目录，您可...

OpenSSH 安全漏洞，修补操作一手掌握

1.漏洞概述近日，国家信息安全漏洞库（CNNVD）收到关于OpenSSH安全漏洞（CNNVD-202407-017、CVE-2024-6387）情况的报送。攻击者可以利用该漏洞在无需认证的情况下，通...

Linux:lsof命令详解（linux lsof命令详解）

介绍欢迎来到这篇博客。在这篇博客中，我们将学习Unix/Linux系统上的lsof命令行工具。命令行工具是您使用CLI（命令行界面）而不是GUI（图形用户界面）运行的程序或工具。lsoflsof代表&...

幻隐说固态第一期:固态硬盘接口类别

前排声明所有信息来源于网络收集，如有错误请评论区指出更正。废话不多说，目前固态硬盘接口按速度由慢到快分有这几类：SATA、mSATA、SATAExpress、PCI-E、m.2、u.2。下面我们来...

新品轰炸 影驰SSD多款产品登Computex

分享泡泡网SSD固态硬盘频道6月6日台北电脑展作为全球第二、亚洲最大的3C/IT产业链专业展，吸引了众多IT厂商和全球各地媒体的热烈关注，全球存储新势力—影驰，也积极参与其中，为广大玩家朋友带来了...

一周热门
最近发表
标签列表