精华内容
下载资源
问答
  • 小程序中解决图片旋转问题

    千次阅读 2019-10-16 21:19:14
    小程序中不需要借助任何工具获取图片信息,通过wx.getImageInfo()获取orientation orientation值有四个 up 不需要旋转 down 旋转180度 left 旋转270度 right 旋转90度 小程序中处理图片旋转条件 需要在wxml...

    在一些相机设备中因手持方向的原因导致图片会有一个旋转角度,在图片加载后旋转角度被忽略了,导致图片看过去是旋转的,
    小程序中不需要借助任何工具获取图片信息,通过wx.getImageInfo()获取orientation
    orientation值有四个
    在这里插入图片描述

    1. up 不需要旋转
    2. down 旋转180度
    3. left 旋转270度
    4. right 旋转90度

    小程序中处理图片旋转条件

    1. 需要在wxml中添加canvas组件
    2. 设置canvas-id属性
    3. 为了让这个canvas不显示,设置绝对定位并定位在显示区外
    <button  catchtap="onUploadAction">选择图片</button>
    <view>旋转前</view>
    <image class="rotateBefore" src="{{rotateBefore}}" mode="aspectFit"></image>
    <view>旋转后</view>
    <image class="rotateAfter" src="{{rotateAfter}}" mode="aspectFit"></image>
    
    <!-- 请注意canvas组件属性 -->
    <canvas canvas-id="my-canvas" 
    style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;position:absolute;top:-2000%;">
    </canvas>
    
    // components/upload-img/index.js
    Component({
      data: {
        rotateBefore: null,
        rotateAfter: null,
        canvasWidth:null,
        canvasHeight:null
      },
      methods: {
        onUploadAction(e) { // 选择图片
          let _this = this
          wx.showActionSheet({
            itemList: ['从相册中选择', '拍照'], // 选择方式
            success: function(res) {
              if (!res.cancel) {
                if (res.tapIndex == 0) {
                  _this.chooseWxImage('album')
                } else if (res.tapIndex == 1) {
                  _this.chooseWxImage('camera')
                }
              }
            }
          })
        },
        chooseWxImage(type) {
          let _this = this;
          wx.chooseImage({
            sizeType: ['original', 'compressed'],
            sourceType: [type],
            success: function(result) {
              let tempFilePaths = result.tempFilePaths // 获得文件地址
              //  旋转前
              _this.setData({
                rotateBefore: tempFilePaths[0] // 设置旋转前的image
              })
              wx.getImageInfo({ // 获取图片的信息
                src: tempFilePaths[0],
                success: (res) => {
                  let canvasContext = wx.createCanvasContext('my-canvas', _this)
                  // 下面按比例写死宽度高度是为了压缩图片提升上传速度,可按实际需求更改
                  let rate = res.height / res.width 
                  let width = 500
                  let height = 500 * rate
                  switch (res.orientation) { // 根据orientation值处理图片
                    case ("up"):
                      //不需要旋转
                      _this.setData({
                        canvasWidth: width,
                        canvasHeight: height,
                      })
                      canvasContext.drawImage(tempFilePaths[0], 0, 0, width, height);
                      break;
                    case ("down"):
                      //需要旋转180度
                      _this.setData({
                        canvasWidth: width,
                        canvasHeight: height,
                      })
                      canvasContext.translate(width / 2, height / 2)
                      canvasContext.rotate(180 * Math.PI / 180)
                      canvasContext.drawImage(tempFilePaths[0], -width / 2, -height / 2, width, height);
                      break;
                    case ("left"):
                      //顺时针旋转270度
                      _this.setData({
                        canvasWidth: height,
                        canvasHeight: width,
                      })
                      canvasContext.translate(height / 2, width / 2)
                      canvasContext.rotate(270 * Math.PI / 180)
                      canvasContext.drawImage(tempFilePaths[0], -width / 2, -height / 2, width, height);
                      break;
                    case ("right"):
                      //顺时针旋转90度
                      _this.setData({
                        canvasWidth: height,
                        canvasHeight: width,
                      })
                      canvasContext.translate(height / 2, width / 2)
                      canvasContext.rotate(90 * Math.PI / 180)
                      canvasContext.drawImage(tempFilePaths[0], -width / 2, -height / 2, width, height)
                      break;
                  }
                  canvasContext.draw(false, () => { // 将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中
                    wx.canvasToTempFilePath({ // 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。
                      canvasId: 'my-canvas',
                      success(res) {
                        let filePath = res.tempFilePath
                        _this.setData({
                          rotateAfter: filePath
                        })
                      }
                    }, _this)// 在自定义组件下,当前组件实例的this,以操作组件内 canvas 组件
                  })
                }
              })
            }
          })
        }
      }
    })
    

    效果展示
    在这里插入图片描述

    展开全文
  • 接下来我们来讲一下微信小程序中图片点击放大预览的实现步骤! 思路: 1.点击事件 2.放大 3.左右滑动查看上、下一张 在绑定点击事件的时候我们需要同时获取到点击图片的url和这一组数据的ID(通过这个id从数据...

    这个强大的API( wx.previewImage() ),嘿嘿嘿!接下来我们来讲一下微信小程序中图片点击放大预览的实现步骤!

    思路:

    1.点击事件

    2.放大

    3.左右滑动查看上、下一张

    在绑定点击事件的时候我们需要同时获取到点击图片的url和这一组数据的ID(通过这个id从数据里面找到你点击的这一组数据然后从中取出这一组图片就可以了)

    index.wxml

    
     <view class='topic_answerImg'>
                  
        <block wx:for='{{item.answerImg}}' wx:key='index' wx:for-item='answerItem'>
            <image bindtap='topic_preview' data-id='{{item.id}}' data-url='{{answerItem}}' class='topic_answer_itemImg' src='{{answerItem}}'></image>
        </block>
    
    </view>
    

     注意:上面获取的ID是这一组数据的id不是这个图片的id

    index.wxss

    .topic_answerImg{
      width: 100%;
      display: -webkit-box;
      display: -webkit-flex;
      flex-wrap: wrap;
    }
    .topic_answer_itemImg{
      width: 210rpx;
      height: 210rpx;
      margin-right: 30rpx;
      margin-bottom: 30rpx;
    }
    .topic_answer_itemImg:nth-of-type(3n){
      margin-right: 0;
    }

    index,js

      //预览图片
      topic_preview: function(e){
        var that = this;
        var id = e.currentTarget.dataset.id;
        var url = e.currentTarget.dataset.url;
        var previewImgArr = [];
        //通过循环在数据链里面找到和这个id相同的这一组数据,然后再取出这一组数据当中的图片
        var data = that.data.topic_recomData;
        for (var i in data) {
          if (id == data[i].id) {
            previewImgArr = data[i].pic;
          }
        }
        wx.previewImage({
          current: url, // 当前显示图片的http链接
          urls: previewImgArr // 需要预览的图片http链接列表
        })
      },
    
    
    

    这样就可以进行点击图片进行预览啦,啦啦啦啦,又写了一篇,简单而快乐的生活如此这般!嘿嘿嘿!

    展开全文
  • 微信小程序中图片下面出现空白区

    千次阅读 2019-06-05 14:15:27
    小程序wxml如果出现了这种结构:<view><image></view>, 只需设置图片垂直居中的方式(vertical-align)为middle即可。
    小程序wxml中如果出现了这种结构:<view><image></view>,
    
    
    
    
    只需设置图片垂直居中的方式(vertical-align)为middle即可。
    
    展开全文
  • <view class="desc"> <text class="text">复制的文字</text> <image src="图片路径"></image> </view> <view class="btn"> <button bindtap='cop...
       <view class="desc">
          <text class="text">复制的文字</text>
          <image src="图片路径"></image>
        </view>
        <view class="btn">
          <button bindtap='copyText' data-text="{{copyText}}">复制文案</button>
          <button wx:if="{{saveImgBtn}}" bindtap='saveImg'  >保存推广图</button>
          <button open-type="openSetting"
    bindopensetting='saveImg' wx:if='{{openSettingBtn}}' >授权并保存图片</button>
        </view>
    

    js文件:
    (1)这里由于第一次授权点击拒绝之后,再次点击不会出现授权按钮,因此需要使用open-type="openSetting"再次调用授权窗口。 如果未授权或者授权失败,出现 ‘授权并保存图片’按钮。

    data: {
        saveImgBtn: true,    //为true时,显示保存按钮
        openSettingBtn: false,    //为true时,显示授权并保存按钮
      }, 
    
    /****保存图片 */
      saveImg: function () {
        let that = this
        wx.getSetting({
          success(res) {  
            if (!res.authSetting['scope.writePhotosAlbum']) {   
            //未授权 先授权 然后保存
              wx.authorize({
                scope: 'scope.writePhotosAlbum',
                success(re) {
                  that.saveImageToPhotosAlbum();
                  that.setData({
                    saveImgBtn: true,
                    openSettingBtn: false
                  })
                },
                fail() {     //用户取消授权
                  that.setData({
                    saveImgBtn: false,
                    openSettingBtn: true
                  })
                }
              })
            } else {
              //授权了, 调用保存到相册方法
              that.saveImageToPhotosAlbum();
              that.setData({
                saveImgBtn: true,
                openSettingBtn: false
              })
            }
          }
        })
      },
      //保存网络图片到相册方法
      saveImageToPhotosAlbum: function () {
    	  wx.downloadFile({
    	  url:'   ',
    	  success(result) {
    		   wx.saveImageToPhotosAlbum({
    		      filePath: tempFilePath,
    		      success(result) {
    		        wx.showToast({
    		          title: '已保存至相册'   
    		        })
    		      }
    	    })
    	  }
    	 })
      },
    

    (2)复制文案

     //复制
      copyText: function (e) {
        wx.setClipboardData({
          data: e.currentTarget.dataset.text,
          success: function (res) {
            wx.getClipboardData({
              success: function (res) {
                wx.showToast({
                  title: '复制成功'
                })
              }
            })
          }
        })
      },
    
    展开全文
  • 随着小程序的发展微信小程序中为了更加方便用户体验,在小程序中添加图片预览、长按转发、保存、收藏、识别图二维码等 前端代码: &lt;view wx:for="{{imgalist}}"wx:for-item="image...
  • 微信小程序保存图片到相册可以分成两种:一种是保存网络图片,一种是保存本地图片 保存网络图片: var url = '网络图片路径'; wx.downloadFile({ url: url, success: function (res) { var benUrl = res....
  • 小程序中canvas绘制网络图片

    千次阅读 2018-03-20 13:29:02
    小程序中,canvas绘制图片,可使用drawImage方法,但是绘制网络图片时,在手机端不会显示,需要先将网络图片下载到本地,然后用图片的本地路径绘制。如下伪代码:function downLoadImg(netUrl, storageKeyUrl) { wx...
  • 小程序访问图片403错误

    千次阅读 2018-11-22 11:21:52
    问题描述:后台富文本编辑器,图文编辑信息,最后展示再小程序端时,出现图片403问题,无法正确显示问题...在小程序中,添加 image 标签,将图片路径放入 src ,出现图片依然访问不到403。 排除 html 转 wxml 问...
  • 小程序图片下载

    千次阅读 2019-07-09 19:59:46
    在开发小程序中,有时候在小程序中有很多漂亮的图片,用户想要下载,但是长按保存没效果,截图?又显得太low,所以,给用户个好的体验,给用户进行图片下载的功能。 如下所示,在页面触发这个方法就可以,红色区域...
  • 调用将微信小程序生成小程序二维码图片接口时,在前端无法显示的问题 下面是接口的地址以及开发文档: https://developers.weixin.qq.com/miniprogram/dev/api/open-api/qr-code/getWXACode.html 接口请求的地址为:...
  • 微信小程序中图片处理

    万次阅读 2017-04-14 21:57:59
    微信小程序中图片处理 微信小程序中的用于向页面插入图片。有两个重要的属性 1、src 要插入图片的资源地址 2、mode 图片裁剪、缩放的模式 下面仔细说一下mode属性 当我们不知道获取到图片的宽高或者...
  • 1.小程序中图片不能识别除小程序码以外的二维码 2.并且仅在 wx.previewImage 支持长按识别 官方文档(wx.previewImage组件) html代码(这里我就简单的添加了一张图片做测试) &lt;image src="/image...
  • wx.chooseImage上传图片 wx.getImageInfo获取图片宽高等信息 bindtouchstart,bindtouchmove记录双指事件 通过双指移动的距离与初始距离的关系判断缩放 规定阈值,最大与最小缩放 开始操作 上传图片 由于上传的图片...
  • 微信小程序实现图片上传功能

    万次阅读 多人点赞 2017-09-07 10:24:37
    这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //上传图片 uploadImage: function () { var that = this; wx.chooseImage({ count: 1, //最多可以选择的图片...
  • 微信小程序小程序图片压缩

    千次阅读 2018-05-07 11:14:21
    js里面var requestCallback = function (err, data) {//请求结果wx.getImageInfo({//获取这个图片 图片压缩src: files[filescount],//需要获取的图片 图片选择不用我说了吧success: function (res) {var ctx = wx....
  • 微信小程序开发使用image标签展示的长图因为太长,就会被压扁变形,让人看起来很难看,那如何才能让图片的高度自适应呢?使用css的height:auto也没办法实现。 翻看了小程序社区的问答,发现了一个解决方法,代码...
  • Python 爬取小程序接口图片

    千次阅读 2019-03-21 18:51:29
    Python 爬取小程序接口图片 之前我开发过一个「校徽头像制作」的微信小程序,目前陆陆续续添加了有几百来所高效校徽,用户数也有 ...要爬小程序里面的数据,需要知道小程序的接口地址以及参数。反编译小程序的主要目...
  • 小程序上传图片

    万次阅读 2018-02-06 17:14:19
    data: { evalList: [{ tempFilePaths: [], imgList: [] }] ...//添加图片 joinPicture: function (e) { var index = e.currentTarget.dataset.index; var evalList = this.data.evalList; var that
  • 小程序上传图片总结

    千次阅读 2019-01-05 18:43:22
    在做商城管理后台的时候运用到了小程序,需求遇到了需要上传图片压缩。本来以为比较容易。也踩过一些坑。特此记录下来。 wxml部分 项目使用了canvas的形式进行图片的压缩。所以这里需要有一个canvas标签。因为...
  • 小程序服务器图片的使用

    千次阅读 2018-11-27 14:10:51
    还接了别的组的一个小项目,自己手里的小程序还一分为二个版本,忙的都有点抓不过来了,导致最近发布小程序正式版的时候总是存在一点问题,惭愧惭愧~也总算是告一段落了,现在我来更一片有关使用小程序服务器图片的...
  • 微信小程序中图片高度为0的问题

    千次阅读 2018-09-05 10:39:47
    在微信小程序中,有时候图片加载出来高度是0,但是也有宽度,控制台的wxml中图片也有,最后才知道要给page加个高度,可是当page高度添加上去之后,无论page的值写多少图片大小都不变,找了半天才发现是在app.wxss中...
  • 微信小程序设置背景图片

    万次阅读 2019-04-22 20:48:55
    经常为微信小程序设置颜色背景,...微信小程序中不能使用本地图片 background-image:url(https://xxxxxxxxxxxxxxxxxxxxxx) Base64编码格式 background-image:url(转换之后的base64字符串) 利用流布局,设置z-i...
  • 小程序中图片太大应该怎么处理

    千次阅读 2018-12-17 13:43:54
    小程序中图片格式为png时任然特别大的时候应该先将图片放在服务器上,然后从服务器上选取所用的图片 在小程序中有放置请求接口的配置文件config.js   在小程序页面中要使用大图时候 (1)先引入config.js...
  • 小程序实现图片的浏览,缩放大小

    千次阅读 2019-10-21 20:36:53
    关于弹框显示图片,并且双滑缩放图片的大小,我走了好多好多弯路,结果最后发现小程序完全是这个api实现的了。 使用wx.previewImage即可实现图片的预览,关于缩放大小的功能api也已经自带的了。下面介绍一下这个...
  • 在做图像处理时,难免会对图片做一些切分操作,将一幅图片切分为几个图片或者重新调整图片的大小,顺带批量重命名一些图片文件,为了节约大家找度娘的时间,在这里分享两个超级好用的文件,网盘链接如下: ...
  • 小程序复制和保存页面为图片

    千次阅读 2019-08-24 12:19:26
    复制 复制 //点击复制 copyText(e) { wx.setClipboardData({ data: e.currentTarget.dataset.text, success: function (res) { wx.getClipboardData({ success: function (res) { ...
  • 微信小程序点击图片切换图片

    万次阅读 多人点赞 2019-04-19 13:25:08
    实现的效果图 ...2 使用数据传递当拿到图片的时候更换图片即可. 看下代码 2方式:xml <view class="intro"> <image catchtap='open_tap' wx:if="{{isShow}}" src="/images/icon_flashli...
  • 如何设置小程序背景图片大小

    千次阅读 2019-06-08 13:04:36
    background-size设置背景图片大小 background-size:auto;| XXpx;|<百分比>;|cover;|contain 属性说明: 1、auto:默认值,不改变原始图片的大小。 2、xxpx:自定义设置图片的大小,一般为成对出现例如 100px,...
  • 微信小程序 -- 图片上传

    万次阅读 2020-07-06 15:31:34
    微信小程序图片上传 老方法,复制粘贴就好使 WXML代码: <text class="name_font name">图片<text>:</text></text> <view class="img name"> <view class="list_tupian weui-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 623,132
精华内容 249,252
关键字:

怎么复制小程序里面的图片