当前位置 主页 > 服务器问题 > Linux/apache问题 > 最大化 缩小

    微信小程序点击保存图片到本机功能

    栏目:Linux/apache问题 时间:2019-12-14 10:57

    1.首先我们要把想保存的图片绘制在画布上

    <view class='container'>
     <canvas  class="canvas"  canvas- disable-scroll="true">
     </canvas>
     <button bindtap='clickMe'>保存图片</button>
    </view>

    2.我们在看看看js代码在用wx.canvasToTempFilePath方法会返回一个tempFilePath图片路径

    // canvas 全局配置
    var context = null;
    var rpx
    var posterHeight = 0
    var posterWidth = 0
    var avatarPadding = 0 //距离边界
    var avatarRadiu = 0 //头像半径
    var textScale = 0 //文字比例
     
    //注册页面
    Page({
     
     data: {
      img: "../../images/img1.jpg",
      myCanvasWidth: 0,
      myCanvasHeight: 0,
      posterHeight: 0,
     },
     
     onLoad: function (options) {
      var that = this
      var myCanvasWidth = that.data.myCanvasWidth  //为了让图片满铺页面
      var myCanvasHeight = that.data.canvasHeight
      context = wx.createCanvasContext('canvas');
     
      wx.getSystemInfo({
       success: function (res) {
        myCanvasWidth = res.screenWidth
        myCanvasHeight = res.screenHeight
        posterWidth = Math.round(res.screenWidth * 0.68) //计算让画布图片自适应
        posterHeight = Math.round(posterWidth * 1920 / 1080)
        avatarPadding = Math.round(posterWidth * 20 / 375)
        avatarRadiu = Math.round(posterWidth * 25 / 375)
        textScale = Math.round(posterWidth / 375)
        rpx = res.windowWidth / 375;
        that.setData({
         myCanvasWidth: myCanvasWidth,
         myCanvasHeight: myCanvasHeight,
         posterHeight: posterHeight
        })
        context.drawImage(that.data.img, 0, 0, that.data.myCanvasWidth, that.data.myCanvasHeight); //画布绘制图片
        context.draw();
     
       },
      })
     },
     clickMe: function () { //保存图片
      wx.canvasToTempFilePath({
       canvasId: 'canvas',
       fileType: 'jpg',
       success: function (res) {
        console.log(res)
        wx.saveImageToPhotosAlbum({
         filePath: res.tempFilePath,
         success(res) {
          console.log(res)
          wx.hideLoading();
          wx.showToast({
           title: '保存成功',
          });
          // //存入服务器
          // wx.uploadFile({
          //  url: 'a.php', //接口地址
          //  filePath: res.tempFilePath,
          //  name: 'file',
          //  formData: {                 //HTTP 请求中其他额外的 form data 
          //   'user': 'test'
          //  },
          //  success: function (res) {
          //   console.log(res);
     
          //  },
          //  fail: function (res) {
          //   console.log(res);
          //  },
          //  complete: function (res) {
          //  }
          // });
         },
         fail() {
          wx.hideLoading()
         }
        })
       }
      })
     },
    })

    3,css样式 直接给画布设置高度宽度就可以 图片会铺满屏幕

    总结

    以上所述是小编给大家介绍的微信小程序点击保存图片到本机功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对IIS7站长之家网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    下一篇:没有了