热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

微信小程序实现上传图片裁剪图片过程解析

这篇文章主要介绍了微信小程序实现上传图片裁剪图片过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

有的时候我们上传头像,商品图片这些的时候有的希望上传的是自己想要的图片形状,吧图片宽高固定死的话,他又会变形,比列差不多的看起来没什么区别,不固定的话,他们会宽的高的不一样,看起来完全不舒服,不美观了。

所以想了个这样的办法,用这个裁剪工具,在选择图片的时候,就把图片的大小裁剪成自己想要的大小,这样就都一致了,下面我们来看看吧!

wxml:


 商品图片:
 
  
   x
   
    
   
  
  +
 

wxss

.comlist-image{
 display: flex;
 flex-wrap: wrap
}
.comlist-image .image-list{
 margin-right: 20rpx;
}
.comlist-image .up-img{
 width: 100rpx;
 height: 100rpx;
}
.comlist-image .add-image{
 width: 100rpx;
 height: 100rpx;
 padding: 10rpx;
 display: flex;
 justify-content: center;
 align-items: center;
 border: 1px solid #ccc;
 border-radius: 5px;
 font-size: 50rpx;
}

js:

data: {imgs:[]}

 // 添加图片
 addImage() {
  if (this.data.imgs.length>=5){
   APP.util.toast('商品图片不能超过5张')
   return
  }
  wx.chooseImage({
   count: 1,
   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
   sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机,默认二者都有
   success: function (res) {
    // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
    var tempFilePaths = res.tempFilePaths;
    wx.navigateTo({
     url: "/pages/UploadImg/index?src=" + tempFilePaths
    });
   }
  });

 },
 // 图片预览
 previewImage(e) {
  let id = APP.util.getDataSet(e, 'id')
  wx.previewImage({
   current: this.data.imgs[id],
   urls: this.data.imgs,
  })
 },
 // 删除预览图片
 deleltImage(e) {
  let id = APP.util.getDataSet(e, 'id')
  let arr = this.data.imgs
  arr.splice(id, 1);
  this.setData({
   imgs: arr
  })
 },

将UploadImg.rar下载,放入\pages文件夹中

将weCropper.js下载,放入随便一个文件夹中引入即可


推荐阅读
  • 一般的网页我的项目能够很容易的实现换肤性能,能够通过js扭转link元素中引入的css主题款式链接。然而微信小程序不能动静扭转wxss文件,所以须要其余的计划来实现。 ... [详细]
  • 本文目录一览:1、java中几种解析html的工具 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • 微信小程序导航跟随的实现方法
    本文介绍了在微信小程序中实现导航跟随的方法。通过设置导航的position属性和绑定滚动事件,可以实现页面向下滚动到导航位置时,导航固定在页面最上方;页面向上滚动到导航位置时,导航恢复到原始位置;点击导航可以平滑跳转到相应位置。代码示例也给出了具体实现方法。 ... [详细]
  • 浅解XXE与Portswigger Web Sec
    XXE与PortswiggerWebSec​相关链接:​博客园​安全脉搏​FreeBuf​XML的全称为XML外部实体注入,在学习的过程中发现有回显的XXE并不多,而 ... [详细]
  • C#编程指南:实现列表与WPF数据网格的高效绑定方法 ... [详细]
  • 腾讯云前台面经(笔试+3技术面+HR面)
    话不多说,直接上题。(时间周期太长,可能不太全了)面试周期:从投递简历到收到offer大概经历了一个月左右,所以最好还是不要裸辞,不然心态会裂开。笔试题:(二面、三面后的笔试)1、 ... [详细]
  • 大家好,我们是慢雾安全团队。 ... [详细]
  • IntelliJ IDEA 卡成球了?
    在和同事的一次讨论中发现,对IntelliJIDEA内存采用不同的设置方案,会对IDE的速度和响应能力产生不同的影响。Don’tbeaScroogeandgiveyourIDEso ... [详细]
  • 本文介绍了绕过WAF的XSS检测机制的方法,包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法,该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型(DOM)接收器和源、实施适当的跨域资源共享(CORS)策略和其他安全策略,可以有效阻止XSS漏洞。但是,WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制,构建与正则表达式不匹配的XSS payload。 ... [详细]
  • 背景应用安全领域,各类攻击长久以来都危害着互联网上的应用,在web应用安全风险中,各类注入、跨站等攻击仍然占据着较前的位置。WAF(Web应用防火墙)正是为防御和阻断这类攻击而存在 ... [详细]
  • 【工具篇】抓包中的王牌工具—Fiddler (1环境搭建)
    本文介绍了抓包工具Fiddler的概述,包括其功能、选择原因和安装方法。Fiddler是一款免费且功能强大的抓包工具,可用于网络代理、接口测试、安全测试和WEB调试等。安装配置简单,上手快速,适合新手使用。详细的安装地址为https://www.telerik.com/download/fiddl。 ... [详细]
  • Python已成为全球最受欢迎的编程语言之一,然而Python程序的安全运行存在一定的风险。本文介绍了Python程序安全运行需要满足的三个条件,即系统路径上的每个条目都处于安全的位置、"主脚本"所在的目录始终位于系统路径中、若python命令使用-c和-m选项,调用程序的目录也必须是安全的。同时,文章还提出了一些预防措施,如避免将下载文件夹作为当前工作目录、使用pip所在路径而不是直接使用python命令等。对于初学Python的读者来说,这些内容将有所帮助。 ... [详细]
  • 生产环境下JVM调优参数的设置实例
     正文前先来一波福利推荐: 福利一:百万年薪架构师视频,该视频可以学到很多东西,是本人花钱买的VIP课程,学习消化了一年,为了支持一下女朋友公众号也方便大家学习,共享给大家。福利二 ... [详细]
  • jvm内存区域与溢出为什么学习jvm木板原理,最短的一块板决定一个水的深度,当一个系统垃圾收集成为瓶颈的时候,那么就需要你对jvm的了解掌握。当一个系统出现内存溢出,内存泄露的时候 ... [详细]
author-avatar
渊博的效力
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有