小程序点击图片实现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
Sep 24 Javascript
JS 动态加载脚本的4种方法
May 05 Javascript
jQuery中delegate与on的用法与区别示例介绍
Dec 20 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
Jquery Fade用法详解
Nov 06 jQuery
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
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
php写app用的框架整理
2019/09/29 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
Python递归遍历列表及输出的实现方法
2015/05/19 Python
python装饰器与递归算法详解
2016/02/18 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
django框架如何集成celery进行开发
2017/05/24 Python
Python标准库shutil用法实例详解
2018/08/13 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python 杀死自身进程的实现方法
2019/07/01 Python
Python  Django 母版和继承解析
2019/08/09 Python
解决python 上传图片限制格式问题
2019/10/30 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
经典优秀个人求职信分享
2013/12/12 职场文书
八年级音乐教学反思
2014/01/09 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL