可以通过canvas来实现。
具体步骤如下:
下面是一个示例代码:
function webpToJpeg(webpUrl, callback) {
// 创建一个Image对象
var img = new Image();
img.src = webpUrl;
// 当图片加载完成后
img.onload = function() {
// 创建一个canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 设置canvas的宽高和图片一样
canvas.width = img.width;
canvas.height = img.height;
// 在canvas上绘制图片
ctx.drawImage(img, 0, 0);
// 将绘制的图片转换为base64编码的字符串
var base64 = canvas.toDataURL('image/jpeg');
// 创建一个新的Image对象
var newImg = new Image();
newImg.src = base64;
// 当新的图片加载完成后
newImg.onload = function() {
// 创建一个新的canvas
var newCanvas = document.createElement('canvas');
var newCtx = newCanvas.getContext('2d');
// 设置新的canvas的宽高和新的图片一样
newCanvas.width = newImg.width;
newCanvas.height = newImg.height;
// 在新的canvas上绘制新的图片
newCtx.drawImage(newImg, 0, 0);
// 将绘制的图片转换为jpeg格式的base64编码的字符串
var jpegBase64 = newCanvas.toDataURL('image/jpeg');
// 调用回调函数,传递转换后的base64编码的字符串
callback(jpegBase64);
};
};
}
// 调用示例
webpToJpeg('path/to/webp/image.webp', function(jpegBase64) {
console.log(jpegBase64);
});
推荐的腾讯云相关产品:腾讯云云开发(CloudBase)。
腾讯云云开发(CloudBase)是一款面向开发者的全能一体化云原生开发平台,提供了前后端一体化的云开发框架。它支持多种开发语言和开发框架,可快速构建各类应用,免去了搭建和运维服务器的繁琐过程。
产品介绍链接地址:腾讯云云开发(CloudBase)
领取专属 10元无门槛券
手把手带您无忧上云