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


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 相关文章推荐
JQuery动画和停止动画实例代码
Mar 01 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
js下载文件并修改文件名
May 08 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 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连接access数据库
2008/03/27 PHP
PHP array_push 数组函数
2009/12/26 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
提高网站信任度的技巧
2008/10/17 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
React快速入门教程
2017/01/17 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python进阶教程之文本文件的读取和写入
2014/08/29 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python 中的with关键字使用详解
2016/09/11 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
大学团支书的自我评价分享
2013/12/14 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
培训协议书范本
2014/04/22 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
三峡人家导游词
2015/01/31 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL