小程序点击图片,png转jpg,再预览方法

//通过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()    //开画

    },

  方法解释:

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

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

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

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

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

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

原文地址:https://www.cnblogs.com/leepyng/p/11713989.html

时间: 2024-07-30 04:50:06

小程序点击图片,png转jpg,再预览方法的相关文章

微信小程序点击图片放大预览

微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{images}}"> <image src="{{item}}" data-src="{{item}}" bindtap="previewImage

小程序点击图片重新排序写法

写了个小程序已上传图片位置调换的方法,留作备份 具体效果如图所示 <view class="addredBox_img" bindtap="goodsIntroImg"> <view class="addredBox_l"> <view class="nameBox">商品详情图</view> <view class="proposalBox">建

微信小程序点击图片预览-wx.previewImage

<view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='img' src='{{item}}' data-index='{{index}}' bindtap='previewImg'></image> </view> </view> Page({ /** * 页面的初始数据 */ data: { imgArr:[ 'http:

微信小程序点击图片跳转 到另一个页面

onLoad:function(options){ console.log(options) html <view class="list bindtap=onload New data-key=""{{item key}}" js onLoad News:function(e){ console.log(e) wx.navigateTo({e.currentTarget.dataset.key}) url:../description/index.key=+

初识安卓小程序(点击按钮切换屏幕颜色)

如图,点击按钮就会切换屏幕的颜色 首先,先创建一个安卓项目(我的版本是4.4.2的),名字为"world",当然,也可以别的名称 然后在res文件夹下找到layout文件夹,找到activity_main.xml或fragment_main.xml,在里面输入或拖拽按钮 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="htt

小程序点击跳转外部链接 微信小程序提示:不支持打开非业务域名怎么办 使用web-view 配置业务域名

小程序点击跳转外部页面 1.index.wxml  添加点击事件   标签可以是小程序支持的 <!-- 邀请好友 --> <cover-image src='/img/invitation.png' class='img-invitation' bindtap='invitation'></cover-image> 2.index.js   添加事件 invitation: function () { var that = this; wx.showModal({ ti

小程序图像处理:图片配色分析

背景 小程序的canvas是微信基于原生组件自行封装的,因此接口跟web的canvas有不少区别,早期更是没有支持像素级的处理能力.在18年初的小程序基础库1.9.0版本更新中,出现了wx.canvasGetImageData和wx.canvasPutImageData两个重要的API,补全了像素处理能力,因此,小程序在客户端进行图片处理成为了可能.具体可以参考:偷偷迭代的重磅功能---小程序的像素处理能力wx.canvasGetImageData 图片配色分析小程序:小色卡 为了尝试小程序的图

js的FileReader实现图片文件上传、预览

js的FileReader实现图片文件上传.预览 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料:而缺点便是,网页的大小可能会变大.它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使用.您的图像文件不能够超过浏览器限定的大小,否则无法读取图像文件.1

真的炸了:让人头痛的小程序之『图片懒加载』终极解决方案

转载:请写明原文链接及作者名 '小小小' 小程序真的会取代一切?QQ群:139128168 ← 点击加群 微信小程序中,懒加载特效让人头疼不已,因为小程序完全没法操作dom,所以位置的操作在小程序中,变得极其的难~~ 先看特效: 我们将其拆分为如下几个步骤进行讲解~~ 1)如何获取图片的位置高度 先看一张图: 通过上图可以知道,图片位置高度其实可以通过img.height + margin值算出. js代码: arrHight[i] = Math.floor(i/2)*(img.height +