php – 裁剪本地图像文件

发布时间：2020-12-13 17:14:52 所属栏目：PHP教程来源：网络整理

导读：我有一个表单,允许用户上传图像并裁剪它我已经弄明白了它的流程 1.用户上传图片 2.Server处理它并发送回浏览器 3.用户裁剪并发送到服务器 4.Server进程并保存有没有其他方法来实现这一目标？也许使用javascript加载图像然后裁剪它然后发送到服务器来处理

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

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

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

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

解决方法

您可以使用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,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插件让用户选择裁剪区域,因为在这个演示中我只是硬编码了左上角100×100像素的裁剪.

您似乎想要使用jcrops onSelect事件来获取裁剪区域的原点宽度高度,并将这些值提供给context.drawImage

希望你能处理剩下的事情,祝你好运

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!