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

所属分类: 网络编程 / JavaScript 阅读数: 1313
收藏 0 赞 0 分享

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样式 直接给画布设置高度宽度就可以 图片会铺满屏幕

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

更多精彩内容其他人还在看

深入解析Vue 组件命名那些事

本篇文章主要介绍了深入解析Vue 组件命名那些事,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue学习笔记进阶篇之vue-cli安装及介绍

这篇文章主要介绍了Vue学习笔记进阶篇之vue-cli安装及介绍,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jquery版轮播图效果和extend扩展

这篇文章主要为大家详细介绍了jquery版轮播图效果,以及extend扩展的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jQuery Validate格式验证功能实例代码(包括重名验证)

本文通过实例代码给大家介绍了jQuery Validate格式验证功能,代码中包括重名验证的方法,需要的的朋友参考下吧
收藏 0 赞 0 分享

Angular.js中angular-ui-router的简单实践

本篇文章主要介绍了Angular.js中angular-ui-router的简单实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript实现二维坐标点排序效果

这篇文章主要为大家详细介绍了JavaScript实现二维坐标点排序效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

深入理解vue2.0路由如何配置问题

本篇文章主要介绍了vue2.0路由配置问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

基于bootstrap实现多个下拉框同时搜索功能

这篇文章主要为大家详细介绍了基于bootstrap实现多个下拉框同时搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript 值类型和引用类型的初次研究(推荐)

这篇文章主要介绍了JavaScript 值类型和引用类型的初次研究,需要的朋友可以参考下
收藏 0 赞 0 分享

利用jQuery异步上传文件的插件用法详解

这篇文章主要介绍了利用jQuery异步上传文件的插件用法详解,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多