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

 更新时间:2019年12月13日 10:36:03   作者:前端_李嘉豪  
这篇文章主要介绍了微信小程序点击保存图片到本机功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

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

<view class='container'>
 <canvas style='width:{{canvasWidth}}px; height:{{canvasHeight}}px' class="canvas" id="canvas" canvas-id="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样式 直接给画布设置高度宽度就可以 图片会铺满屏幕

总结

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

相关文章

  • javascript实现简单的鼠标拖动效果实例

    javascript实现简单的鼠标拖动效果实例

    这篇文章主要介绍了javascript实现简单的鼠标拖动效果,实例分析了javascript鼠标拖动效果的相关要点与实现技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • js时间日期格式化封装函数

    js时间日期格式化封装函数

    这里给大家推荐一款自己封装的js时间日期格式化的函数,非常的简洁实用,分享给有需要的小伙伴
    2014-12-12
  • echarts数据可视化实现多个柱状堆叠图顶部显示总数示例

    echarts数据可视化实现多个柱状堆叠图顶部显示总数示例

    这篇文章主要为大家介绍了echarts实现多个柱状堆叠图顶部显示总数示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • js实现百度淘宝搜索功能

    js实现百度淘宝搜索功能

    这篇文章主要为大家详细介绍了js实现百度淘宝搜索功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • JS实现图片高斯模糊切换效果的焦点图实例

    JS实现图片高斯模糊切换效果的焦点图实例

    这篇文章主要给大家介绍了利用原生JS如何实现图片高斯模糊切换效果的焦点图,文中给出了完整的实例代码,相信对大家的理解和学习具有一定的参考借鉴价值,下面来一起看看吧。
    2017-01-01
  • 让textarea自动调整大小的js代码

    让textarea自动调整大小的js代码

    让textarea自动调整大小的js代码,需要的朋友可以参考下。
    2011-04-04
  • 小程序文字跑马灯效果

    小程序文字跑马灯效果

    这篇文章主要为大家详细介绍了小程序文字跑马灯效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 微信小程序教程系列之页面跳转和参数传递(6)

    微信小程序教程系列之页面跳转和参数传递(6)

    这篇文章主要为大家详细介绍了微信小程序教程系列之页面跳转和参数传递,微信小程序提供了3种页面跳转方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • webpack4.x打包过程详解

    webpack4.x打包过程详解

    这篇文章主要介绍了webpack4.x打包过程详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 实现网页内容水平或垂直滚动的Javascript代码

    实现网页内容水平或垂直滚动的Javascript代码

    用Javascript实现新闻内容的水平或垂直滚动,主要的优点是我们可以实现自定义滚动风格或特效,应用效果比起传统的marquee更加具有特色,方法也比较简单
    2012-10-10

最新评论