小程序点击图片实现png转jpg


Posted in Javascript onOctober 22, 2019

这篇文章主要介绍了小程序点击图片实现png转jpg,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

页面数据初始化添加参数:isSignCanvassShow<br><br>//通过canvas将图片转为jpg,使图片生成白色底便于查看预览

//list为原图片数组列表,index表示当前图片下标,
//imgList表示已经通过canvas转化的图片列表
  trasformImgType(list,index,imgList){
    this.setData({
      isSignCanvasShow:true
    });
    index=index?index:0;
    const that=this;
    let img=list[index].fileUrl;
    img=img.replace(/http/,'https');
    tip.loading('正在打开图片');
    //获取图片信息,
    wx.getImageInfo({
      src: img,
      success (res) {
        //画入canvas
        const context = wx.createCanvasContext('picCanvas');
        that.resetCanvas(context);
        context.drawImage(res.path,0, 0);
        context.draw(false,function(drawed){
          // console.log(drawed);
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: 414,
            height: 300,
            destWidth: 414,
            destHeight:300,
            fileType: 'jpg',
            canvasId: 'picCanvas',
            success(imgRes) {
              tip.loaded();
              imgList.push(imgRes.tempFilePath);
              if(index<list.length-1){
                that.trasformImgType(list,index+1,imgList)
                return;
              }
              that.setData({
                isSignCanvasShow:false
              })
              wx.previewImage({
                current: '', //图标当前下标
                urls: imgList, // 需要预览的图片http链接列表
                fail:function(res){
                  tip.alert('图片过期需刷新');
                },
              })
            },
            fail() {
              that.setData({
                isSignCanvasShow:false
              })
              tip.loaded();
              tip.alert('图片过期需刷新');
            }
          })
        } )
      }
    })
  },  
  //重绘画板
  resetCanvas(context){
    context.rect(0, 0, this.data.screenWidth, this.data.screenHeight - 4); //画板大小
    context.setFillStyle('#fff');//背景填充
    context.fill() //设置填充
    context.draw()  //开画
 
  },

wxml文件需要添加如下代码:

<view hidden="{{!isSignCanvasShow}}">
<canvas canvas-id="picCanvas" id='picCanvas' class="pic-canvas" ></canvas>
</view>

方法解释:

通过wx.previewImage预览图片时,会出现格式为png预览背景为黑色时,图片查看不清楚,能过下面的方法转化为白色底,方便查看

1、先用wx.getImageInfo 下载图片到本地,并且获取图片的信息;

2、将图片画入canvas,并生成临时图片地址;

3、将canvas生成的地址填写入imgList缓存起来;

4、当所有图片都转化完成之后,调用wx.previewImage查看图片

5、每次转化完一片图片的时候,就重新绘制一下canvas;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js控制web打印(局部打印)方法整理
May 29 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
nuxt引入组件和公共样式的操作
Nov 05 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 #Javascript
微信小程序实现左侧滑动导航栏
Apr 08 #Javascript
微信小程序自定义组件components(代码详解)
Oct 21 #Javascript
微信小程序实现侧边分类栏
Oct 21 #Javascript
微信小程序实现侧边栏分类
Oct 21 #Javascript
微信小程序中weui用法解析
Oct 21 #Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 #Javascript
You might like
用PHP中的 == 运算符进行字符串比较
2006/11/26 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
python实现类的静态变量用法实例
2015/05/08 Python
Python 基础之字符串string详解及实例
2017/04/01 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
django实现模型字段动态choice的操作
2020/04/01 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
Android面试宝典
2013/08/06 面试题
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
go语言中http超时引发的事故解决
2021/06/02 Golang