微信小程序实现图片压缩

2024-09-29 05:27:37

本文实例为大家分享了微信小程序图片压缩的具体代码，供大家参考，具体内容如下

设计思路：

选择图片后调用微信压缩图片接口，压缩后接收压缩图片的临时地址，调用微信储存接口保存图片至本地。

参数：

imagesrc：图片地址
imgcount：是否选择图片
show_hidden：是否展示按钮

接口：

wx.chooseImage：选择图片
wx.compressImage：压缩图片
wx.saveImageToPhotosAlbum：保存图片至相册
wx.showToast：提示信息

wxml

<view>
 <view>
   <image src="{{imagesrc}}" style="width: 100%;" bindtap="chooseMyImage">
   </image>
 </view>
 <view class="textView">
  <text>
   （推荐使用jpg格式的图片）
  </text>
 </view>
 <view class="ImgOperateView">
  <button type="primary" bindtap="chooseMyImage">选择图片</button>
  <button type="primary" bindtap="MyImageCompression" style="{{show_hidden}}">压缩图片</button>
 </view>
</view>

// miniprogram/pages/ImgCompression/ImgCompression.js
Page({

 /**
  * 页面的初始数据
  */
 data: {
  imagesrc:"../../images/NoImage.jpg",
  imgcount:0,
  show_hidden: "display:none;",
 },

 //选择图片
 chooseMyImage:function () {
  var that = this;
  wx.chooseImage({
   count:1,
   success: function(res) {
    that.setData({
     imagesrc:res.tempFilePaths[0],
     imgcount:1,
     show_hidden:"display:block"
    }),
     wx.showToast({
      title: "已选择图片",
     })
   },

   fail: function() {
    wx.showToast({
     title:"请选择图片",
     icon:"none",
    })
   }
  })
 },

 //压缩图片
 MyImageCompression:function () {
  var that = this;
  if(that.data.imgcount == 1){
   wx.showToast({
    title: "正在压缩图片",
    icon:"loading",
   })

   wx.compressImage({
    src:that.data.imagesrc,
    quality:0,
    success: function(res) {
     wx.showToast({
      title: "压缩成功",
     });

     wx.saveImageToPhotosAlbum({
      filePath:res.tempFilePath,
      success:function(res) {
       wx.showToast({
        title: "已保存至相册",
       });
      }
     })
    },

    fail: function() {
     wx.showToast({
      title:"压缩失败",
      icon:"none",
     })
    }
   })
  }
 }
})

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序上传图片并等比列压缩到指定大小的实例代码

微信小程序官方API中 wx.chooseImage() 是可以进行图片压缩的,可惜的是不能压缩到指定大小. 实际开发中需求可能是压缩到指定大小: 原生js可以使用canvas来压缩,但由于微信小程序对canvas有封装,使得利用canvas来压缩图片有了一些区别: 代码放在了git:https://github.com/jonyellow/code-diary/tree/master/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87%E5%8E%8B
微信小程序之批量上传并压缩图片的实例代码

具体内容如下所示: 首先,要在.wxml文件里面创建一个canvas,作用是承载压缩的图片,以供上传的时候获取这个canvas不能隐藏,否则没效果,可以将其移至屏幕外. <canvas canvas-id='attendCanvasId' class='myCanvas'></canvas> 然后呢,就是.js文件里面的方法了 // 点击加_压缩 takePhoto: function () { var that = this; let imgViewList = that.da
微信小程序实现图片压缩功能

小龙大哥的微信小程序在初始阶段相当于IE界的6,在这里给大家说一个刚趟过去的坑. 拍照的API. wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,temp
微信小程序中上传图片并进行压缩的实现代码

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

本文实例为大家分享了微信小程序图片压缩的具体代码,供大家参考,具体内容如下设计思路: 选择图片后调用微信压缩图片接口,压缩后接收压缩图片的临时地址,调用微信储存接口保存图片至本地. 参数: imagesrc:图片地址 imgcount:是否选择图片 show_hidden:是否展示按钮接口: wx.chooseImage:选择图片 wx.compressImage:压缩图片 wx.saveImageToPhotosAlbum:保存图片至相册 wx.showToast:提示信息 wxml <v
微信小程序选择图片和放大预览图片功能

视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片. wx.chooseImage({}) 此方法是用来选择图片的方法,具体使用如下: data: { avatarUrl:null }, 首先在数据中定义接收数据的变量,然后调用方法选择图片,将图片显示出来. bindViewTap:function(){ var that = this; wx.chooseImage({ // 设置最多可以选择的图片张数,默认9,如果我们设置了多张,那么接收时//就不在是单个变量了, c
微信小程序实现图片轮播及文件上传

微信小程序实现图片轮播及文件上传刚刚接触微信小程序,看着网上的资源写了个小例子,本地图片轮播以及图片上传. 图片轮播: index.js <span style="font-size:14px;">var app = getApp() Page({ data:{ mode: 'aspectFit', // src:'../images/timg1.jpg', imgUrls:[ '../images/1.jpg', '../images/2.jpg', '../imag
微信小程序实现图片上传、删除和预览功能的方法

本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法.分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览布局 <view class="img-v"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image src="{{i
tp5实现微信小程序多图片上传到服务器功能

最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中:  <view class="picture"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <im
微信小程序实现图片上传功能实例（前端+PHP后端）

前言几乎每个程序都需要用到图片.下面就来给大家介绍前端+PHP后端实现微信小程序实现图片上传功能,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 方法如下: 一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择上传图</button> </view> <image src='{{source}}' style=
微信小程序实现图片上传功能

本文实例为大家分享了微信小程序实现图片上传功能的具体代码,供大家参考,具体内容如下前端:微信开发者工具后端:.Net 服务器:阿里云这里介绍微信小程序如何实现上传图片到自己的服务器上前端代码 data: { productInfo: {} }, //添加Banner bindChooiceProduct: function () { var that = this; wx.chooseImage({ count: 3, //最多可以选择的图片总数 sizeType: ['compress
微信小程序对图片进行canvas压缩的方法示例详解

微信小程序其实自带一个图片压缩的API wx.compressImage,但是这玩意目前感受就是个垃圾.IOS大多数情况下据说还可以,安卓有的时候降低质量压缩后体积反而变大,而且没办法控制其压缩至具体指定的大小,压缩后多大看天意.所以需要使用画布去自己实现一个图片压缩方法. 简单来讲原理就是:找个不显示在页面上的画布画上去,再取出,如果体积还是太大,缩小尺寸后再画,再取,递归下去,直到体积满足要求.(所以限制的越小,图片越大,压缩越久,递归次数越多) 第一步:新建一个zipPic.js文件(名字
微信小程序选择图片控件

本文实例为大家分享了微信小程序选择图片控件的具体代码,供大家参考,具体内容如下 xml: <loading hidden="{{loadingHidden}}"> 加载中... </loading> <view class="add_carimg"> <block> <view class="load_iamge"> <text class="load_head_text

微信小程序实现图片压缩

相关推荐

随机推荐