I have a png thumbnail with base64 data. I am trying to convert it to jpeg thumbnail. I am not sure what am I doing wrong. My current item has a blank thumbnail
var canvas = document.createElement('canvas');
canvas.id = currItem.Id + '_1';
canvas.width = currItem.ThumbnailInfo[0].Width;
canvas.height = currItem.ThumbnailInfo[0].Height;
var ctx = canvas.getContext('2d');
var p = new Promise((resolve, reject) => {
var img = new Image();
img.src = currItem.ThumbnailInfo[0].Thumbnail;
img.onload = async function () {
await ctx!.drawImage(img, 0, 0, canvas.width, canvas.height);
var imageData = ctx?.getImageData(0, 0, canvas.width, canvas.height);
ctx?.fillRect(0, 0, canvas.width, canvas.height);
//var imageData = canvas.toDataURL();
var imagejpeg = canvas.toDataURL('image/jpeg');
resolve(imagejpeg);
}
});
let imagejpgeg2 = await p;
currItem.ThumbnailInfo[0].Thumbnail = imagejpeg;
You may use Javascript JIMP Library to process Images.(PNG to JPG) you should take a look at https://www.npmjs.com/package/jimp