Javascript 如何使用html和js保存旋转后的图像链接？_Javascript_Html

Javascript 如何使用html和js保存旋转后的图像链接？

javascript html

Javascript 如何使用html和js保存旋转后的图像链接？,javascript,html,Javascript,Html,我有一些html和js代码，可以从url加载图像，并允许您旋转图像。我想能够保存图像后，它已经被旋转，最好与一个新的网址。如果可能的话，我也更愿意使用html和js来实现，但我对jquery或w/e持开放态度，因为我不知道如何实现 <html> <head> <style> #photoimg { top: 0; bottom: 0;

我有一些html和js代码，可以从url加载图像，并允许您旋转图像。我想能够保存图像后，它已经被旋转，最好与一个新的网址。如果可能的话，我也更愿意使用html和js来实现，但我对jquery或w/e持开放态度，因为我不知道如何实现

<html>
    <head>
        <style>
            #photoimg {
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }
            #photo {
                position: relative;
            }
        </style>
        </head>
<form action="#" method="post">
    <input type="url" name="imglink" id="imglink"  placeholder="Insert image URL here" /><br>
    <input type="button" value="Show Image" id="btn1"/>
    </form>
        <div id="photo"></div>
        <script>
            document.getElementById('btn1').addEventListener('click', function(){
                document.getElementById('photo').innerHTML = '<img id="photoimg" src="'+ document.getElementById('imglink').value +'" alt="Image"/>';
                //Get larger edge
                var largerPhotoDimension = Math.sqrt(Math.pow(document.getElementById('photoimg').offsetWidth , 2) + Math.pow(document.getElementById('photoimg').offsetHeight ,2) );
                var marginVert = (largerPhotoDimension - document.getElementById('photoimg').offsetHeight)/2;
                var marginHorz = (largerPhotoDimension - document.getElementById('photoimg').offsetWidth)/2;
                //Adjust container to fix image rotated 90deg
                document.getElementById('photo').style.marginRight =  marginHorz;
                document.getElementById('photo').style.marginLeft =  marginHorz;
                document.getElementById('photo').style.marginBottom = marginVert;  
                document.getElementById('photo').style.marginTop = marginVert;                  
            });
        </script>
        <button id="button">rotate</button>
    <script>
        document.getElementById('button').onclick = function(){
            var curr_value = document.getElementById('photoimg').style.transform;
            var new_value = "rotate(90deg)";
            if(curr_value !== ""){
                var new_rotate = parseInt(curr_value.replace("rotate(","").replace(")","")) + 90;
                new_value = "rotate(" + new_rotate + "deg)";
            }
            document.getElementById('photoimg').style.transform = new_value;
        };
    </script>
    </body>
</html>

无法使用javascript保存图像。您可以使用php插件或其他服务器端脚本或其他php插件

<?php 
    function rotateImage($imagePath, $angle, $color) {
        $imagick = new \Imagick(realpath($imagePath));
        $imagick->rotateimage($color, $angle);
        header("Content-Type: image/jpg");
        echo $imagick->getImageBlob(); 
    } 
?>

以下是它的文档：

我认为您对代码的实际功能存在误解-它不会触及图像本身，而是会改变图像的显示方式。如果您的目标是使结果像照片编辑器一样可保存，那么您应该考虑使用画布，尽管它有点高级。您应该将此作为答案发布，我会选择它！这种方法的兼容性如何？也就是说，它能在所有浏览器上工作吗？我对IE8以上的任何东西都很满意。我在尝试运用渐进式强化的规则。是的。这是一个服务器端脚本。只要它安装在服务器上，它就可以在所有Bowser上工作。这个选项，以及使用canvas，都是我将要研究的好主意。谢谢