As someone who is new to the world of coding, I have a few goals in mind:
- First and foremost, I want to create a canvas.
- I also aim to add a background image to the canvas. Importantly, this background image should be separate from any foreground images created using 'drawImage(image, x, y)'.
- One of my key objectives is to include a slider that allows users to zoom in and out on the background image. However, I am facing a challenge in resizing the image since it's positioned in the background.
- Additionally, I hope to incorporate two buttons - one for rotating the image left, and the other for rotating it right.
All these tasks must be accomplished using HTML5, CSS3, and jQuery only.
I would greatly appreciate it if someone could explain these concepts in a beginner-friendly manner, preferably with detailed explanations of the code.
Thank you in advance!
Below is the code snippet that I've experimented with:
<div class="slider" style="width:500px; height:10px;"></div>
<br />
<div id="div_buttons">
<table border="0">
<tr>
<td>
<input type="button" id="rotateLeft" align = "left" value="Rotate Left" />
</td>
<td>
<input type="button" id="rotateRight" align = "left" value="Rotate Right" />
</td>
</tr>
</table>
</div>
<!--HERE IS THE STYLE TAG... -->
<style type="text/css">
img
{
opacity: 0.5;
}
.canvas
{
background: url('script.jpg');
opacity: 0.5;
}
</style>
<!--HERE IS THE JAVASCRIPT INSIDE <SCRIPT> TAG... -->
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
var globalElement_width;
var globalElement_height;
$(document).ready
(function() {
$img = $('.canvas img');
globalElement_width = $img.width();
globalElement_height = $img.height();
$(".slider").slider
({
step: 1,
min: 10,
max: 100,
value: 0,
slide: function(event, ui)
{
resize_img(ui.value);
}
});
$("#rotateLeft").click(function() {
$('canvas').css({
"transform":"rotate(-90deg)"
});
}
) //addClass("left")
$("#rotateRight").click(function() {
$('canvas').css({
"transform":"rotate(0deg)"
});
}
)
});
function resize_img(val)
{
var width = globalElement_width;
var height = globalElement_height;
var zoom_percen = (height * 1); // Maximum zoom 50%
var ASPECT = 10;//zoom_percen / 30;
var zoom_value = val / 1;
var size = width + ASPECT * zoom_value;
var d = ASPECT*zoom_value/10;
$img = $('.canvas img');
$img.stop(true).animate({
marginTop: -d,
marginLeft: -d,
width: size,
height: size
}, 250);
}
</script>
</body>