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


Posted in Javascript onDecember 13, 2019

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

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 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
浅析JavaScript中的变量提升
Jun 01 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 #Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 #Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 #Javascript
使用uni-app开发微信小程序的实现
Dec 13 #Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 #Javascript
微信小程序关键字变色实现代码实例
Dec 13 #Javascript
Servlet返回的数据js解析2种方法
Dec 12 #Javascript
You might like
php for 循环语句使用方法详细说明
2010/05/09 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
Node 代理访问的实现
2019/09/19 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
django中使用POST方法获取POST数据
2019/08/20 Python
python中几种自动微分库解析
2019/08/29 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
公司面试感谢信
2014/02/01 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
设计大赛策划方案
2014/06/13 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
八年级语文教学反思
2016/03/03 职场文书
公司与个人合作协议书
2016/03/19 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
Python入门之基础语法详解
2021/05/11 Python
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js