Thank you all for resolving so many queries I had (I did not ask questions here , I found answers to most of my problems by coming here this is my first question so pardon my ignorance.)
I am building a website where i need to do image rotation on client side and then upload that "rotated image" to my server via ajax. Ajax part is all good but the i am stuck at the image rotation part below is my code
rotate function has two inputs one is a file object and another is the radian or degree by which you want to rotate that
'''
function rotate(fls, rad)
{
var canvas = document.createElement('canvas');
canvas.id = 'canvas';
var image = new Image;
image.src = URL.createObjectURL(fls);
var fileName = fls.name;
console.log('Image src is '+image.src);
canvas.width = image.width;
canvas.height = image.height;
var file = new FileReader;
var context = canvas.getContext('2d');
console.log('image height is ' + image.height + ' image width is '+ image.width );
context.drawImage(image, 0, 0 , image.width, image.height);
if(rad == 90 || rad == 270 )
{
canvas.height = canvas.width + (canvas.width = canvas.height, 0);
}
context.save();
console.log('rad * 2 ' + rad*2);
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(rad * Math.PI / 180);
context.drawImage(image,-image.width / 2, -image.height / 2);
context.restore();
var dataUrl = canvas.toDataURL("image/png");
var blob = dataURItoBlob(dataUrl);
console.log('blob is '+blob);
//*******debug purpose
var myReader = new FileReader();
myReader.readAsText(blob);
console.log(JSON.stringify(myReader.result));
//*******debug end
var file = new File([blob], fileName ,{type:"image/png", lastModified:new Date().getTime()})
console.log('original file size as received is ' + fls.size +' post rotation : filename is '+fileName + ' file size is ' + file.size + ' file last modified is '+ file.lastModifiedDate + 'file type is ' + file.type);
return file;
}
function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
var byteString = atob(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
//New Code
return new Blob([ab], {type: mimeString});
} '''
below is the console log Image src is blob:http://localhost:8080/8d86f49d-e0d7-4aa1-8a53-c3689b45707f image height is 0 image width is 0 rad * 2 180 blob is [object Blob] null original file size as received is 93772 post rotation : filename is Capture.PNG file size is 0 file last modified is Wed Jul 28 2021 11:50:10 GMT+1000 (Australian Eastern Standard Time)file type is image/png
the first problem is why is the blob object null and why is the image height and width zero here. I am gettign a feeling that i am wrongly converting the file to image somehow. The file post rotation that gets loaded to server is zero bytes. If i dont call the rotation part or the rotation function the file size and the file are all ok.
Please help me convert and rotate the file here.
