这篇文章主要介绍了小程序点击图片实现png转jpg,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
页面数据初始化添加参数:isSignCanvassShow
& lt; br>//通过帆布将图片转为jpg,使图片生成白色底便于查看预览
//列表为原图片数组列表,索引表示当前图片下标,//imgList表示已经通过帆布转化的图片列表
trasformImgType(列表、索引imgList) {
this.setData ({
isSignCanvasShow:真
});
指数=指数# 63;指数:0;=这个常量;
让img=(指数).fileUrl列表;
img=img.replace (/http/https);
tip.loading(“正在打开图片”);//获取图片信息,
wx.getImageInfo ({
src:编码器,
成功(res) {//画入画布
const上下文=wx.createCanvasContext (“picCanvas”);
that.resetCanvas(上下文);
context.drawImage (res。路径,0,0);
context.draw (false,函数(依){//console.log(依);
wx.canvasToTempFilePath ({
x: 0,
y: 0,
宽度:414年,
身高:300,
destWidth: 414,
destHeight: 300,
文件类型:“jpg”,
canvasId:“picCanvas”,
成功(imgRes) {
tip.loaded ();
imgList.push (imgRes.tempFilePath);
如果(index
wxml文件需要添加如下代码:
& lt;视图隐藏=" {{! isSignCanvasShow}}”在
& lt;帆布canvas-id=" picCanvas " id=皃icCanvas”class=皃ic-canvas”祝辞& lt;/canvas>
& lt;/view>
方法解释:
通过wx.previewImage预览图片时,会出现格式为png预览背景为黑色时,图片查看不清楚,能过下面的方法转化为白色底,方便查看
1,先用wx。getImageInfo下载图片到本地,并且获取图片的信息;
2,将图片画入画布,并生成临时图片地址;
3,将画布生成的地址填写入imgList缓存起来。
4,当所有图片都转化完成之后,调用wx.previewImage查看图片
5,每次转化完一片图片的时候,就重新绘制一下画布;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
