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

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

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

wxml:

<view class="wancll-padded-15 wancll-bg-white wancll-font-size-14">
 <view class="wancll-padded-l-5 wancll-padded-b-10">商品图片:</view>
 <view class="comlist-image is-flex wancll-padded-l-5">
  <view class='image-list' wx:if="{{imgs.length}}" wx:for="{{imgs}}" wx:key="key">
   <zan-badge catchtap='deleltImage' data-id='{{index}}'>x</zan-badge>
   <view class='add-image' catchtap='previewImage' data-id='{{index}}'>
    <image class='up-img' src="{{item}}" mode="aspectFill" />
   </view>
  </view>
  <view class='add-image' catchtap='addImage'>+</view>
 </view>
</view>

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下载，放入随便一个文件夹中引入即可

赞 (0)

相关推荐

  • 微信小程序实现拍照画布指定区域生成图片

    微信小程序实现拍照画布指定区域生成图片

    最近写识别行驶证功能,点击拍照把指定区域截取,生成图片功能. 系统相机.该组件是原生组件,使用时请注意相关限制. 扫码二维码功能,需升级微信客户端至6.7.3. 微信小程序Camera相机地址 我们看下效果: 1.首先生成一个CanvasContext: /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { requireJs.adaptionIphoneX(this); this.ctx = wx.createCameraContext() }

  • 详解微信小程序图片地扯转base64解决方案

    你还在找在小程序成如何将图片转base64存储起来并显示嘛,在这里呢,来瞧瞧. 使用方法 js文件 let $this = this; request({ url:'https://www.dounine.com/hello.jpg', method:'GET', responseType: 'arraybuffer', success:function(res){ let base64 = wx.arrayBufferToBase64(res); $this.data.userImageBas

  • 微信小程序canvas.drawImage完全显示图片问题的解决

    问题描述 问题产生 对于微信小程序,canvas处理过程中,dramImage默认图片引用是有残缺的 导入初始项目 打开链接(原官网例子),浏览器唤醒微信开发这工具,打开连接之前需要下载好微信开发者工具,如已安装则直接唤起,没有则会提示下载 目的 通过对canvas绘图过程的修改,或者其样式的修改,达到完全显示,并自适应不同机型的目的 解决方案 准备工作 Page({ data:{ imgSrc: '', // 需要处理图片地址 imgW: '', // canvas 宽度 imgH: '',

  • 微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

    1.多张图片循环渲染后预览.保存.识别带参数二维码 wxml页面 <view wx:for="{{imgalist}}" wx:for-item="image" class="previewimg"> <image src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>

  • 详解微信小程序文件下载--视频和图片

    文件下载(遇到的坑) 1.要区分下载的内容是什么 0.1  图片下载wx.saveImageToPhotosAlbum(Object object) 0.2  视频下载wx.saveVideoToPhotosAlbum(Object object) 以上算是两大类 2.路径问题 图片文件路径,可以是临时文件路径或永久文件路径,不支持网络图片路径 不支持怎么处理需要使用 DownloadTask wx.downloadFile(Object object) 下载文件资源到本地.客户端直接发起一个

  • 微信小程序实现图片选择并预览功能

    微信小程序实现图片选择并预览功能

    本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一).功能说明 做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片. 其他要点:textarea使用,底部保存按钮固定 (二).小程序接口说明 wx.chooseLocation(Object object) 从本地相册选择图片或使用相机拍照. (三).效果图 效果如下: (四).代码展示 WXML页面: <view class="wrap"> <view cl

  • 微信小程序如何调用图片接口API并居中显示

    微信小程序如何调用图片接口API并居中显示

    写完调用天气接口的demo之后,小程序调用天气接口并且渲染在页面,顺便再调用了一下美图的接口API: 美图API url wxml: <view class='imagesize' wx:for="{{list}}" wx:key="index"> <image src="{{list.img}}" class='in-image' > </image> </view> js: Page({ dat

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

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

    有的时候我们上传头像,商品图片这些的时候有的希望上传的是自己想要的图片形状,吧图片宽高固定死的话,他又会变形,比列差不多的看起来没什么区别,不固定的话,他们会宽的高的不一样,看起来完全不舒服,不美观了. 所以想了个这样的办法,用这个裁剪工具,在选择图片的时候,就把图片的大小裁剪成自己想要的大小,这样就都一致了,下面我们来看看吧! wxml: <view class="wancll-padded-15 wancll-bg-white wancll-font-size-14">

  • 微信小程序列表时间戳转换实现过程解析

    微信小程序列表时间戳转换实现过程解析

    这篇文章主要介绍了微信小程序列表时间戳转换实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一步先写js 随便命名为times.js function toDate(number){ var n=number * 1000; var date = new Date(n); var Y = date.getFullYear() + '/'; var M = (date.getMonth()+1 < 10 ? '0'+(date.get

  • 微信小程序之侧边栏滑动实现过程解析（附完整源码）

    微信小程序之侧边栏滑动实现过程解析（附完整源码）

    一.效果图 讲什么都不如直接上效果图好,所以我们先来看下实现效果如何. 通过滑动屏幕,或者点击左上角的图标按钮,都能实现侧边栏的划出效果. 二.原理解析 1.先实现侧边栏的内容,让侧边栏的内容居左,然后将侧边栏的内容置于屏幕的最底部. 2.接着实现主页的内容,并且让主页的内容默认是覆盖在侧边栏的内容上面. 3.然后,实现手指滑动屏幕的时候,主页的内容,向左滑动一定的宽度,让侧边栏的内容显示出来,而滑动的效果是通过 css 的 transition 来实现的. 三.源码 由于实现过程的时,我对代码

  • 微信小程序实现左侧滑栏过程解析

    微信小程序实现左侧滑栏过程解析

    前言 一直想给项目中的小程序设置侧滑栏,将退出按钮放到侧滑中,但是小程序没有提供相应的控件和API,因此只能自己手动实现,网上很多大神造的轮子很不错,本文就在是站在巨人的肩膀上实现. hexo图片不显示问题,可前往简书 效果 先看看效果,我的侧滑栏需要列出如下信息: 初始状态下,左下角设置悬空按钮 点击悬空按钮,侧边栏拉出,悬空按钮旋转180度 主页内容向右滑动一定比例,并设置阴影遮罩 实现 首先将xml文件分为三部分,一部分是主页内容,一部分是侧滑栏内容,一部分是悬浮按钮. <!--index

  • 微信小程序引入Vant组件库过程解析

    微信小程序引入Vant组件库过程解析

    前期准备 Vant Weapp组件库: https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.json文件:输入命令:npm init 然后一路回车默认的即可: npm init 项目就回产生一个package.json文件: { "name": "miniprogram", "version": "1.0.0", &qu

  • 微信小程序 scroll-view 水平滚动实现过程解析

    微信小程序 scroll-view 水平滚动实现过程解析

    1. scroll-view水平滚动使用 1. wxml <scroll-view class="scroll-wrap" scroll-x> <view class="scroll-view-item"> <view class="scroll-img-wrap scroll-major-img-wrap"> <image src="../../images/wukecheng@2x.png&

  • 微信小程序开发指南之图片压缩解决方案

    目录 前言: 问题:现有的压缩方案支付宝小程序不生效 解决方案: 核心代码展示: 附:微信小程序图片压缩(支持多张图) 小结: 前言: 由于公司业务拓展,急需基于uniapp生成支付宝小程序.之前已经成功将微信小程序和H5融合成一套码,故得知此需求的时候,笔者信心十足,但是本着实践出真知的想法,觉得还是得先调研一下uniapp在支付宝小程序的兼容性,并集成已有项目主体关键功能,为后续的技术调研方案做准备.在调研过程中,发现之前封装好的图片压缩方法在支付宝小程序上无法正常使用,重新阅读了官方文档后

  • 微信小程序中上传图片并进行压缩的实现代码

    小程序上传图片要先了解他其中的各个属性值,在https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html内有详细的介绍 今天在这里主要来讲下如何去上传图片并进行压缩,了解下以下属性值 先来看下页面展示(点击上传图片,从相册中选择,上传完图片后又点了一次上传) 来来来,上代码 wxml代码 <button bindtap='chooseImageTap'>上传图片</button> <button

  • 微信小程序实现上传图片的功能

    微信小程序实现上传图片的功能

    本文实例为大家分享了微信小程序实现上传图片的具体代码,供大家参考,具体内容如下 效果图 WXML <view class="img-wrap"> <view class="txt">上传图片</view> <view class="imglist"> <view class="item" wx:for="{{imgs}}" wx:key="it

  • 微信小程序实现照片裁剪

    本文实例为大家分享了微信小程序实现照片裁剪的具体代码,供大家参考,具体内容如下 前段时间用小程序的canvas.movable-area.movable-view封装了一个按比例裁剪照片的组件,无需引用任何插件.废话不多说,直接贴代码: 组件代码 1.cut_photo.json {   "component": true } 2.cut_photo.wxml <view>   <canvas class="fyj_canvas" canvas-i

随机推荐