我有一个表单,允许用户上传图像并裁剪它 我已经弄明白了它的流程
1.用户上传图片
2.Server处理它并发送回浏览器
3.用户裁剪并发送到服务器
4.Server进程并保存
还有其他方法可以达到这个目的吗? 也许使用javascript加载图像然后裁剪它然后发送到服务器处理它 有办法吗?
被修改
我希望避免将这些图像发送到服务器来处理它
可能使用FileReader加载文件。
谷歌搜索它没有运气
答案 0 :(得分:3)
您可以使用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
希望你能处理剩下的事情,祝你好运
答案 1 :(得分:1)
为此,I'd use jCrop。确保您可以访问系统上的ImageMagick和/或GD - 您很可能需要进行处理。