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

2024-10-21 07:25:19

小程序上传图片要先了解他其中的各个属性值，在https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html内有详细的介绍

今天在这里主要来讲下如何去上传图片并进行压缩，了解下以下属性值

先来看下页面展示（点击上传图片，从相册中选择，上传完图片后又点了一次上传）

来来来，上代码

wxml代码

<button bindtap='chooseImageTap'>上传图片</button>
<button bindtap='saveImage'>保存</button>
<canvas style="width: 300px; height: 200px;" canvas-id="myCanvas"></canvas>

当然最主要的还是js代码咯

var app = getApp()
Page({
 data: {
  logo: null,
　　 pics:[]
 },
 chooseImageTap: function () {
  let _this = this;
  wx.showActionSheet({
   itemList: ['从相册中选择', '拍照'],//下面显示的数组是拍照还是别的
   itemColor: "#f7982a",//显示文字的颜色
   success: function (res) {
    if (!res.cancel) {//选中判断
     if (res.tapIndex == 0) {
      _this.chooseWxImage('album')
     } else if (res.tapIndex == 1) {
      _this.chooseWxImage('camera')
     }
    }
   }
  })

 },
 // 绘制图片到canvas上
 chooseWxImage: function (type) {
  const ctx = wx.createCanvasContext('myCanvas')//画布
  var that = this;
  wx.chooseImage({//上传图片事件
   count: 9,//数量
   sizeType: ['original', 'compressed'],//original 原图，compressed 压缩图，默认二者都有
   sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有
   success: function (res) {
    console.log(res)
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 100, 100)//成功选定第一张。后面的四个值分别是left，top，width，height，来控制画布上的图片的位置和大小
    ctx.draw()
   }
  })
  },
saveImage: function () {//这里触发图片上传的方法
  var pics = this.data.pics;
  app.uploadimg({
   url: 'https://........',//这里是你图片上传的接口
   path: pics//这里是选取的图片的地址数组
  });
 },

总结

以上所述是小编给大家介绍的微信小程序中上传图片并进行压缩的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

微信小程序实现指定显示行数多余文字去掉用省略号代替

效果图实现 wxml <view class='goods-details'> <text class='goods-details-title'>商品详情</text> <text catchtap='showAllAction' class='goods-details-content {{isShowAllContent ?"content-all" :"content-breif"}}'>你如安好,便是晴天你
微信小程序行的删除和增加操作实现详解

第一步:在项目的app.json中创建一个新的页面(页面名称英文,可自定义) 第二步:在创建的新页面中编写页面(注意bindtap属性值,因为是我们的js的函数方法名) 第三步:在对应的js里设置全局对象在page中的data方法中初始赋值对于页面中绑定事件创建对应的方法函数进行相关处理,使用push方法添加数组数据 ,pop方法删除数据,join方法数据间隔,考虑现实逻辑关系,在删除行的时候进行if的判断是否为空(注意每个方法后面逗号隔开,最后一个方法的大括号后可不用逗号) 完整图: 以上
微信小程序文字显示换行问题

小程序文字显示换行问题用户在上传图文时,输入换行符.导致我在拿到数据后JSON.parse的时候报错. 大概这样的结构: [{ text:'落魄前端在线炒粉!!!' , url:'' },{ text:'' , url:'xxx.jpg', }] 解决在拿到数据时先进行正则匹配处理,将换行替换为\n data.replace(/\n/g,'\\n') 然后在进行JOSN.parse就无问题啦. 还要注意的是要使用 text 标签输出才会有换行显示喔. ps:下面看下微信小程序文字超出自
微信小程序onLaunch异步,首页onLoad先执行?

本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执行了. //app.js App({ onLaunch: function () { console.log('onLaunch'); wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { }, success: function(res) {
微信小程序如何利用getCurrentPages进行页面传值

最近刚赶完项目,利用空闲时间总结一下. 小程序的页面间传值 , 之前处理这种例如 a页面跳转b页面,在b页面进行一波操作回到a页面都是把b页面的操作的数据存到本地存储 wx.setStorageSync("b_data","b页面的数据") 在a页面是这样的 wx.getStorageSync("b_data") 但是这种方法怎么说呢不利于操作还会导致storage里面的数据非常混乱过一段时间鬼知道是什么,操作也麻烦总之就是略low 后
微信小程序动画（Animation）的实现及执行步骤

简单总结一下微信动画的实现及执行步骤. 一.实现方式官方文档是这样说的:①创建一个动画实例 animation.②调用实例的方法来描述动画.③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性. 因为小程序是数据驱动的,给这句话加上数字标注分为三步: 前两步是定义一个动画并设置都要干什么,然后把这个设置好的"规则"扔给界面上的某个元素,让它按照这个规则执行. 当然如果有多个元素的animation="{{ani}}",也都会执
微信小程序中进行地图导航功能的实现方法

前段时间一直都在做小程序做了两个月了,其中对于小程序还是有很不理解的地方看着一些大企业的小程序自己模仿其实还是有一些难度的,我觉得学习小程序看一遍文档是不够的我们要做的是看别人的例子对着文档一一对照! 好这次我们来开始我们的开发,其实微信小程序里面是不能导航的,原因是小程序的代码最多只能有1M,他的运行内存只能有10M,一个区域地图下载下来就不止1M了所以在应用内我们无法做到导航的,但是应用外呢! 我问过很多做安卓和IOS的同僚一般如果导航这个功能不是很重要的话就会放到应用外来做这个功能,但是高
微信小程序中上传图片并进行压缩的实现代码

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

微信小程序中button去除默认的边框的实现方法如下所示: button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px; box-sizing:border-box; font-size:18px; text-align:center; text-decoration:none; line-height:2.5555555
微信小程序中实现手指缩放图片的示例代码

公司开发微信小程序,pm想实现如下需求: 用手指缩放图片.其实在实现这个需求以前,并不知道,微信公众号以及微信小程序里面有一个原生的api就自带这个特效,而且微信朋友圈也是用的这个api.wx.previewImage,就是它.预览图片.除了不能预览开发环境的本地电脑的图片外,你手机真机的图片,以及http服务器上的图片都是可以预览的,而且缩放功能做得很流畅.下面就说说如何用js来实现这个功能吧. 先上源码,然后在逐步剖析: Page({ data: { touch: { distance: 0
微信小程序中顶部导航栏的实现代码

微信小程序中顶部导航栏的实现实例代码: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view> <view class="swiper-tab-list {{curre
微信小程序实现上传图片小功能

本文实例为大家分享了微信小程序实现上传图片的具体代码,供大家参考,具体内容如下用到的apiwx.chooseMedia(); 用于拍摄或从手机相册中选择图片或视频功能:点击上传图片,可多选,或者拍照上传:点击图片放大查看:长按图片删除效果图 json里面引用weui的组件uploader { "navigationBarTitleText": "评价工单", "usingComponents": { "mp-upl
微信小程序开发指南之图片压缩解决方案

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

大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 在微信小程序中渲染HTML内容的3种解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「wxParse」的库.它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来. rich-text 后来,小程序增加了「rich-text」组件用于展示富文
微信小程序实现上传图片的功能

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

本文实例为大家分享了微信小程序实现上传图片的具体代码,供大家参考,具体内容如下 //wxml <button class='button' bingtap="uploadSomeMsg">上传</button> <view class="uploadImgBox"> <view class='smallImgBox'> <block
微信小程序中的swiper组件详解

微信小程序中的swiper组件微信小程序中的swiper组件真的是简单方便提供了页面中图片文字等滑动的效果 <swiper> <swiper-item></swiper-item> <swiper-item></swiper-item> <swiper-item></swiper-item> </swiper> 这里的就是一个滑块视图容器:而就是你希望滑动的东西,可以是文字也可以是image 其中swipe

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

相关推荐

随机推荐