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

2024-09-30 21:35:41

这篇文章主要介绍了小程序点击图片实现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；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序内拖动图片实现移动、放大、旋转的方法

屏幕就像是数学上的坐标轴,且在第四象限,以屏幕左上角为圆点,X轴向右为正向左为负,Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基本用法微信小程序这里提供了两个API wx.createContext() 创建并返回绘图上下文context对象 getActions 获取当前context上存储的绘图动作,对应wx.drawCanvas(object)中的actions clearActions 清空当前的存储绘图动作 wx.dra
小程序图片剪裁加旋转的示例代码

一个微信小程序图片剪裁组件,可以通过手势控制旋转缩放移动,也可以点击旋转进行90度旋转,先看下效果(视屏不知道为啥用不了,上个压缩过度的GIF先): 图片剪裁毫无疑问用的是canvas,但是开发过小程序的同学应该了解小程序canvas的一些坑.比如小程序canvas的设定了画布的大小后不能像web的canvas那样通过css样式来调整画布在手机上显示的大小.还有canvas不能设置太大因为可能会在某些安卓机上导致小程序崩溃.canvas绘制过大的图片会让小程序变得非常卡顿等等. 网上能找到的图片
详解微信小程序图片地扯转base64解决方案

你还在找在小程序成如何将图片转base64存储起来并显示嘛,在这里呢,来瞧瞧. 使用方法 js文件 let $this = this; request({ url:'https://www.dounine.com/hello.jpg', method:'GET', responseType: 'arraybuffer', success:function(res){ let base64 = wx.arrayBufferToBase64(res); $this.data.userImageBas
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

1.多张图片循环渲染后预览.保存.识别带参数二维码 wxml页面 <view wx:for="{{imgalist}}" wx:for-item="image" class="previewimg"> <image src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>
微信小程序实现图片翻转效果的实例代码

老规矩,先上图: 页面: <view class='rotateCtn' bindtap='rotateFn'>  <view class='frame {{class1}}'> <image src="{{vo.cover1}}"></image> </view>  <view class='frame {{class2}}'> <im
微信小程序 Animation实现图片旋转动画示例

最近小程序中有一个图片旋转的需求,最初是想着通过切换多张图片达到旋转的效果,后来发现微信小程序带有动画api,然后就改由image+Animation来实现. 首先在wxml中定义image <image class="bth_image2" mode="aspectFit" animation="{{animation}}" src='../../images/***.png'></image> 注意其中的animati
微信小程序实现点击图片旋转180度并且弹出下拉列表

本文为大家分享了微信小程序实现图片旋转.下拉列表的具体代码,供大家参考,具体内容如下正文: 先上效果图: index.wxml <view class="phone_one" bindtap="clickPerson"> <view class="phone_personal">{{firstPerson}}</view> <image src="../../image/v6.png"
小程序点击图片实现png转jpg

这篇文章主要介绍了小程序点击图片实现png转jpg,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下页面数据初始化添加参数:isSignCanvassShow<br><br>//通过canvas将图片转为jpg,使图片生成白色底便于查看预览 //list为原图片数组列表,index表示当前图片下标, //imgList表示已经通过canvas转化的图片列表 trasformImgType(list,index,imgList){ t
小程序点击图片实现自动播放视频

通过列表的点击事件自动播放列表对应的视频,同时停止上一个视频的播放. 源码: <view> <view class='vv' wx:for='{{vedio_data}}' wx:key=''> <view class='block' style='margin-left:20rpx;'> <image src='/img/1.png' class='img1' style='margin-left:20rpx'></image> <tex
微信小程序 chooseImage选择图片或者拍照

微信小程序 chooseImage选择图片或者拍照一.使用API wx.chooseImage(OBJECT) var util = require('../../utils/util.js') Page({ data:{ src:"../image/pic4.jpg" }, gotoShow: function(){var _this = this wx.chooseImage({ count: 9, // 最多可以选择的图片张数,默认9 sizeType: ['original'
微信小程序之裁剪图片成圆形的实现代码

前言最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主要思路就是使用canvas绘图,把剪裁的图片绘制成圆形,另外剪裁图片的窗口还可以移动放大缩小,这个功能就用了微信组件movable-view,好了,该说的也说完了,下面咱们开始撸代码. movable-view组件可移动的视图容器,在页面中可以拖拽滑动会有好多个属性,在这里不一一介绍,只说我们能
微信小程序点击切换样式scroll-view实现代码实例

这篇文章主要介绍了微信小程序点击切换样式scroll-view实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 scroll-view滚动视图点击切换样式 *.wxml <view class="content"> <view class="navbg"> <view class="nav"> <scroll-view class="
微信小程序点击保存图片到本机功能

1.首先我们要把想保存的图片绘制在画布上 <view class='container'> <canvas style='width:{{canvasWidth}}px; height:{{canvasHeight}}px' class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true"> </canvas> <b
微信小程序点击生成朋友圈分享图(遇到的坑)

上个月boss交给我个微信小程序的活,告诉我只需要负责前端页面这块,问我多久做完,于是我不知天高地厚的说一礼拜就能完工,哈哈哈,果然,现实总是那么无情的来打脸了...磨磨蹭蹭一共用了将近3个礼拜才算完事. 今天就来总结下遇到的各种坑好了~~~ 由于做的是仿照包你说的小程序,这里就借用包你说的截图好啦 (这个做出来是模拟器跟真机上都会显示生成的图片的,鬼知道是为啥..) 唔,不废话了,直接上代码好啦 A:wxml(一定要加上image标签,如果你没有加的话,那么即使图片生成了,在页面上也是不会显
微信小程序自定义支持图片的弹窗

本文实例为大家分享了微信小程序自定义支持图片的弹窗,供大家参考,具体内容如下为index.wxml添加如下图代码: (微信小程序 - canvas层级最高问题,如何超越canvas的层级,只能使用cover-view标签)  <button class="show-btn" bindtap="showDialogBtn">弹窗</button>  <cover

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

相关推荐

随机推荐