php - 裁剪本地图像文件

Question

我有一个允许用户上传图像并裁剪它的表单我已经弄清楚了它的流程

1.用户上传图片
2.服务器处理并发送回浏览器
3.用户裁剪并发送到服务器
4.服务器处理并保存

有没有其他方法可以实现这一目标？
也许使用 javascript 加载图像，然后裁剪它，然后发送到服务器进行处理。
有办法吗？

编辑 我希望避免将这些图像发送到服务器进行处理。
可能使用 FileReader 加载文件。
我在谷歌上搜索它没有运气

Answer 1

您可以使用FileReader+Canvas读取本地文件，然后将其裁剪而不将其发送到服务器。

这是一个演示如何做到这一点。

<form><input type="file" id=f></form>
<canvas id=c width="600" height="600"></canvas>
<script>
var f = document.getElementById('f');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
f.onchange = function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function(evt) {
        var img = new Image();
        img.onload = function() {
          context.drawImage(this, 0, 0, 100, 100, 0, 0, 100, 100);
          var pngUrl = canvas.toDataURL();
          //alert(pngUrl); // send this url to server to save the image
        }
        img.src = evt.target.result;
    }
    reader.readAsDataURL(file);
}
</script>

你还需要做的是使用 jquery jcrop 插件来让用户选择裁剪区域，因为在这个演示中我只是硬编码了左上角 100x100 像素的裁剪。

看起来您需要使用jcrops onSelect事件来获取裁剪区域的原点 + 宽度 + 高度，并将这些值输入context.drawImage

希望你能处理剩下的，祝你好运

Answer 2

为此，我会使用 jCrop。确保您可以访问系统上的 ImageMagick 和/或 GD——您很可能需要它来进行处理。

编辑（2021 年 10 月 2 日）-原始链接/库似乎已被放弃。我还没有尝试过，但看起来它会起作用：https ://jcrop.com/