Question

我试图使我的图像在上载时旋转，但是对于源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>&lt;canvas&gt;</code></h1>

    <p>This example shows how a photo is loaded in a <code>&lt;canvas&gt;</code> tag
    and then flipped.</p>

    <p>Click on the photo to flip (provided, of course, that your browser supports <code>&lt;canvas&gt;</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>

上传/选择图像后，无法在Canvas中旋转图像

0 个答案: