选择图片</button><button bindtap="getInfo">获取图片信息</button><button bindtap="preview">预览图片</button><button bindtap="save">保存图片到相册</b,秉承网络共享原则,分享网络资源,Windows系统下载,网络建站技术分享">
    当前位置:
  1. 首页 »
  2. 笔记 »
  3. 正文

微信小程序选择照片(支持拍照)、获取图片信息、预览图片、保存图片到相册

零分 3,177

微信小程序图片操作wxml:

<button bindtap="choose">选择图片</button>
<button bindtap="getInfo">获取图片信息</button>
<button bindtap="preview">预览图片</button>
<button bindtap="save">保存图片到相册</button>

<!-- 展示上传成功的图片 -->
<image src="{{loadSrc}}"></image>

微信小程序图片操作JS:

Page({

    /**
     * 页面的初始数据
     */
    data: {
        loadSrc:''
    },
    // 保存图片
    save(){
        var that=this;
        wx.saveImageToPhotosAlbum({
            filePath:that.data.loadSrc,
            success(res){
                console.log('save success!!!');
            }
        })
    },
    // 预览图片
    preview(){
        var that=this
        wx.previewImage({
            urls:[that.data.loadSrc],
            showmenu:true
        })
    },
    // getImageInfo
    getInfo(){
        var that=this;
        wx.getImageInfo({
            src:that.data.loadSrc,
            success(res){
                console.log(res,'ressuccess');

            }
        })
    },
    // 选择图片
    choose(){
        var that=this
        wx.chooseMedia({
            success(res){
                that.setData({
                    loadSrc:res.tempFiles[0].tempFilePath
                })
            },
            fail(res){
            },
            complete(res){
            }
        })
    },

})

微信小程序单指、双指操作图片/层(移动缩放)

微信小程序单指、双指操作图片/层WXML: <view class="myCanvas"> <image src="{{ loadSrc}}" class="img" bindtouchstart="touchstartCallback" bindtouchmove="touchmoveCallback" bindload="imgload" style="width: {{ scaleWidth }}px;height: {{ scaleHeight }}px;margin-top:{{marginTop}}px;margin-left:{{margin
笔记 2,855

微信小程序canvas初始化、绘图、保存

微信小程序canvas初始化、绘图、保存,记录保存一下 canvas初始化 /***初始化canvas */ initCanvas(){ // 通过 wx.createSelectorQuery()方法创建 const query = wx.createSelectorQuery() query.select('#myCanvas') // canvas id .fields({ node: true, size: true }) .exec((res) => { const
笔记 2,745

微信小程序scroll-view下拉刷新,出现一直刷新

用scroll-view,主要原因是,可以在顶部固定一个模块,虽然position:fixed可以实现,但发现在真机上总会出现一条小白条,看着不是很舒服 scroll-view下拉刷新,需要用到几个属性:scroll-view官方说明 refresher-enabled:开启自定义下拉刷新 refresher-threshold:设置自定义下拉刷新阈值 refresher-default-style:设置自定义下拉刷新默认样式,支持设置 black | white | none, none 表示不使用默认样式 refresher-background:设置自定义下拉刷新区域背景颜色 refre
笔记 5,155

微信小程序scroll-view禁止滚动条

微信小程序禁用scroll-view滚动条 ::-webkit-scrollbar { display: none; } 其实也简单,就是这样一个CSS样式,关键是这个样式要放在哪里! 在写的时候,一直无法生效,翻看之前写的,也是一样的,但之前的可以生效! 认真翻看才发现,这个要在在app.wxss里,并不是写在页面上!如果怕兼容,可以全部都写上 ::-webkit-scrollbar { display:none; width: 0 !important; height: 0 !important; -webkit-appearance: none;
笔记 3,003

微信小程序开发新版本检测、网络请求、json格式判断封装

微信小程序开发新版本检测、网络请求、json格式判断封装,放在APP.JS里,方便各个页面调用。 App({}) 1、小程序新版本检测 if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 if (res.hasUpdate) { updateManager.onUpdateReady(
笔记 2,709