heic图片转换
问题：
heic图片在微信小程序端不能回显也不能上传成功。
1.了解heic图
Heic格式是苹果专门为iOS11开发的照片格式。Heic是苹果iOS和macOS的一种文件格式，用于处理图像和视频。Heic是H.264和JEP格式，取代了IOS 11系统中的原始视频和照片。Heic格式不仅可以节省内存，还可以保留原始图像质量。Heic格式是苹果iOS和iOS的特殊格式。
heic的特点：与JPG相比，heic格式占用空间更少，图像质量更无损。HEIC格式照片支持iOS11和macOS High Sierra(10.13)及更高版本。但是这种格式不能用图片查看软件直接在Windows中打开(Windows10 RS4开始支持这种格式)。
2.微信小程序下的回显
heic的图片在微信小程序下，经过压缩，可以转换为jpeg，展示
wx.compressImage({
src: path, // 图片路径
quality: 50, // 压缩质量
success: (res) => {
console.log(res, 'ressss')
},
fail: (err) => {
console.log(err)
}
})注意：压缩图片在微信小程序可以回显页面，但是继续上传后端，依旧会失败
3.解决微信小程序上传失败
终极解决方案是后端进行转换。暂时没有找到前端能直接转换的方案，如果有，欢迎讨论
（下面是为了上传heic图片成功，所以用本地node端测试了一下转换图片，在回传给前端，在重新上传给真正的后端转换的图片上传成功的案例）
(1)微信小程序端
//选择图片
wx.chooseMedia({
count: 1,
mediaType: 'image',
success: (r) => {
//上传给node服务器进行转换
wx.uploadFile({
url: 'http://localhost:7001/uploadImg/api/heictoany',
filePath:r.tempFiles[0].tempFilePath,
name: 'file',
success: (res) => {
let src = 'http://localhost:7001/MKIntouch/' ++JSON.parse(res.data).src
//拿到地址重新下载图片
wx.downloadFile({
url: src,
success (tempR) {
if (tempR.statusCode === 200) {
//重新生成本地临时路径（用这个路径在去上传给后端可上传heic成功，也可以回显）
console.log(tempR.tempFilePath)
}
}
})
}
})
}（2）node端转换heic
主要使用插件
GitHub - catdad-experiments/heic-convert: 🤳 convert heic/heif images to jpeg and png
node端用了egg.js框架
1.进行配置
文件上传 | Egg
egg.js内置了
配置插件 - config.default.js
const whitelist = [
// images
'.jpg', '.jpeg', // image/jpeg
'.png', // image/png, image/x-png
'.gif', // image/gif
'.bmp', // image/bmp
'.wbmp', // image/vnd.wap.wbmp
'.webp',
'.tif',
'.psd',
// text
'.svg',
'.js', '.jsx',
'.json',
'.css', '.less',
'.html', '.htm',
'.heic',
'.HEIC',
'.xml',
// tar
'.zip',
'.gz', '.tgz', '.gzip',
// video
'.mp3',
'.mp4',
'.avi',
];
exports.multipart = {
whitelist,
fileSize: '50mb',
};
如果不配置config，接收文件流会报错
2.在router页面进行创建
创建文件夹 - uploadImg->app,js
'use strict';
module.exports = app => {
const { router, controller } = app;
const subRouter = router.namespace('/uploadImg');
subRouter.post('/api/heictoany', controller.uploadImg.api.heictoany);
};
3.controller层进行业务书写
要使用的插件需要利用npm下载哦
controller新建文件夹uploadImg->app.js
'use strict';
const egg = require('egg');
const convert = require('heic-convert');
const fs = require('fs');
const { promisify } = require('util');
const path = require('path');
const awaitWriteStream = require('await-stream-ready').write;
const senToWormhole = require('stream-wormhole');
// 时间格式化
const dayjs = require('dayjs');
const await = require('await-stream-ready/lib/await');
module.exports = class Pages extends egg.Controller {
async heictoany() {
const { ctx } = this;
// 获取文件流
const stream = await ctx.getFileStream();
// 创建基础的目录
const uploadBasePath = 'public/img';
// 创建生成的基础名
const filename = `${Date.now()}${Number.parseInt(Math.random() * 1000)}${path.extname(stream.filename).toLocaleLowerCase()}`;
// const resultname = filename.replace(/heic/g, 'png')
const resultname = filename.replace(/heic/g, 'jpg')
// 生成文件夹
const dirname = dayjs(Date.now()).format('YYYY/MM/DD');
// 创建目录
function mkdirsSync(dirname) {
if (fs.existsSync(dirname)) { // fs.existsSync检测目录是否存在，存在返回true,反之亦然
return true;
}
if (mkdirsSync(path.dirname(dirname))) { // 返回 path 的目录名,尾部的文件名会被忽略path.dirname('/目录1/目录2/目录3');返回'/目录1/目录2'
fs.mkdirSync(dirname);// fs.mkdirSync同步地创建目录
return true;
}
}
mkdirsSync(path.join(uploadBasePath, dirname));// path.join，以特定的分隔符将路径连接起来
// 生成写入路径
const target = path.join(uploadBasePath, dirname, filename);
console.log(path.join(uploadBasePath, dirname), '文件文件');
// 写入流
const writeStream = fs.createWriteStream(target);
try {
// 异步把文件流 写入
await awaitWriteStream(stream.pipe(writeStream));
} catch (err) {
// 如果出现错误，关闭管道
await sendToWormhole(stream);
return Promise.reject('上传错误');
}
const inputBuffer = await promisify(fs.readFile)(target);
console.log(inputBuffer, 'inputBuffer');
const outputBuffer = await convert({
buffer: inputBuffer, // the HEIC file buffer
format: 'JPEG', // output format
// format: 'PNG', // output format
});
console.log(outputBuffer, 'outbuffer')
console.log(path.join(uploadBasePath, dirname, resultname), 'xxxx')
const resultUrl = path.join(uploadBasePath, dirname, resultname);
console.log(resultUrl, 'resultURLLLLL')
await promisify(fs.writeFile)(resultUrl, outputBuffer);
ctx.status = 200;
ctx.body = {
src: resultUrl
};
}
};
经过测试发现，只有转成jpg才可以进行重新上传到服务器。转成png，依旧无法上传到服务器
如果是想转换给前端base64,可以继续进行转化
let res = fs.readFileSync(resultUrl,'binary')
const buffer = new Buffer(res, 'binary');
const src = 'data: image/png;base64,' + buffer.toString('base64');暂时没有什么其他方法了，微信官方都推荐后端进行转换
转换插件，会发现，如果heic图片转换时间有点慢（1.8M的heic转换启动本地的node会大概11s左右）
欢迎交流该问题