I’m trying to make a little canvas feature, that lets you upload a picture and it adds an overlay over it. I got it to upload, create an image on top and download, but when I try to upload an image through a phone. It turns the image 90 degrees.
Am I missing something here? Do I have to test for the size of the image and scale it, before it gets added to canvas.
ANY help would be a lot of help, thanks.
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid blue;
padding: 1em;
}
.wrap{
width: 180px;
height: 180px;
margin: 0 auto;
background: red;
position: relative;
}
</style>
<div class="box">
<div class="wrap">
<canvas id="canvas" width="180" height="180"></canvas>
</div>
<br />
<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>
<br />
<br />
<a href="#" clss="buttonLink" id="downloadLink">Download!</a>
</div>
<script>
$(document).ready(function() {
//upload images.
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
//draw image.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//download link.
var downloadLink = document.getElementById('downloadLink');
//upload image.
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
var width = 180;
var height = 180;
img.onload = function(){
context.drawImage(img,0,0, width, height);
var imageObj = new Image();
imageObj.setAttribute('crossOrigin', 'anonymous');
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = icon.png';
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
};
//download link.
downloadLink.onclick = function () {
downloadLink.href = canvas.toDataURL();
downloadLink.download = 'facebook';
};
});
</script>
You need to read the EXIF data and act accordingly. Example library to read the data: https://github.com/exif-js/exif-js
also already answered question JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
Also from another source, this is how you should handle the exif orientation on your canvas:
switch(orientation){
case 2:
// horizontal flip
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
break;
case 3:
// 180° rotate left
ctx.translate(canvas.width, canvas.height);
ctx.rotate(Math.PI);
break;
case 4:
// vertical flip
ctx.translate(0, canvas.height);
ctx.scale(1, -1);
break;
case 5:
// vertical flip + 90 rotate right
ctx.rotate(0.5 * Math.PI);
ctx.scale(1, -1);
break;
case 6:
// 90° rotate right
ctx.rotate(0.5 * Math.PI);
ctx.translate(0, -canvas.height);
break;
case 7:
// horizontal flip + 90 rotate right
ctx.rotate(0.5 * Math.PI);
ctx.translate(canvas.width, -canvas.height);
ctx.scale(-1, 1);
break;
case 8:
// 90° rotate left
ctx.rotate(-0.5 * Math.PI);
ctx.translate(-canvas.width, 0);
break;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With