Я пытаюсь заставить мое изображение вращаться при загрузке, но оно не отвечает на код, для этого источника https://www.phpied.com/photo-canvas-tag-flip/, я думаю, что это как-то связано с тем, что мое изображение не нацелено должным образом, потому что вссылка это работает нормально*
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Flipping photo in a canvas tag</title>
<style>
#canvas {cursor: pointer;}
</style>
</head>
<body>
<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>
<h1>Example of using <code><canvas></code></h1>
<p>This example shows how a photo is loaded in a <code><canvas></code> tag
and then flipped.</p>
<p>Click on the photo to flip (provided, of course, that your browser supports <code><canvas></code>)</p>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
can.width = img.width;
can.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
can.onclick = function() {
ctx.translate(img.width-1, img.height-1);
ctx.rotate(Math.PI);
ctx.drawImage(img, 0, 0, img.width, img.height);
};
</script>
<p><a href="http://www.phpied.com/photo-canvas-tag-flip/">Blog post is here</a></p>
</body>
</html>