浏览图像并立即裁剪

Question

首先要说我找不到任何解决方案。

在保存之前我需要帮助裁剪图像。

当客户端浏览并选择少量图像时，使用此脚本图像将自动显示在div中。问题是我想剪裁图像：

例子。

图片宽度：1230px

图像高度：670px

我想裁剪宽度为670像素并显示（为670像素670像素）

我有浏览图片的宽度和高度，我只想裁剪并显示裁剪的图像。

脚本：

<script>
        function readURL(input) {
            for($i = 0;$i < input.files.length;$i++) {
                if (input.files && input.files[$i]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        var img = new Image;

                        img.onload = function() {
                            var width = img.width; // image is loaded; sizes are available
                            var height = img.height;
                        };

                        img.src = reader.result; // is the data URL because called with readAsDataURL

                        div = $(".image-upload");
                        $(".image-upload").append("<img id='image-upload' src='"+e.target.result+"' />");
                        $("#image-upload").css({
                            "width" : "300px",
                            "height" : "300px"
                        });
                    }
                    reader.readAsDataURL(input.files[$i]);
                }
            }
        }

        $("#files").change(function(){
            $(".image-upload").empty();
            readURL(this);
        });
</script>