在上传之前在浏览器中裁剪图像

我发现的许多图书馆,如Jcrop,实际上并没有裁剪,它只创build一个图像裁剪UI。 然后取决于服务器做实际的裁剪。

如何使用某些HTML5function在不使用任何服务器端代码的情况下将图像剪裁到客户端

如果是,是否有一些例子或提示?

是的,可以做到。
它基于锚标签的新html5“下载”属性。
stream程应该是这样的:

  1. 加载图像
  2. 将图像绘制到指定了裁剪边界的canvas上
  3. 从canvas中获取图像数据,并将其作为dom中锚定标记的href属性
  4. 将下载属性( download="desired-file-name" )添加到该元素就是这样。 所有用户必须做的是点击你的“下载链接”,图像将被下载到他的电脑。

当我有机会时,我会回来演示。

更新
这是我承诺的现场演示 。 它需要jsfiddle徽标和作物5px的每个边距。
代码如下所示:

 var img = new Image(); img.onload = function(){ var cropMarginWidth = 5, canvas = $('<canvas/>') .attr({ width: img.width - 2 * cropMarginWidth, height: img.height - 2 * cropMarginWidth }) .hide() .appendTo('body'), ctx = canvas.get(0).getContext('2d'), a = $('<a download="cropped-image" title="click to download the image" />'), cropCoords = { topLeft : { x : cropMarginWidth, y : cropMarginWidth }, bottomRight :{ x : img.width - cropMarginWidth, y : img.height - cropMarginWidth } }; ctx.drawImage(img, cropCoords.topLeft.x, cropCoords.topLeft.y, cropCoords.bottomRight.x, cropCoords.bottomRight.y, 0, 0, img.width, img.height); var base64ImageData = canvas.get(0).toDataURL(); a .attr('href', base64ImageData) .text('cropped image') .appendTo('body'); a .clone() .attr('href', img.src) .text('original image') .attr('download','original-image') .appendTo('body'); canvas.remove(); } img.src = 'some-image-src'; 

更新II
忘了提及:当然有一个缺点:(。
由于也应用于图像的同源策略,因此如果要访问图像的数据(通过canvas方法toDataUrl )。
所以你仍然需要一个服务器端的代理服务器来为你的图像提供服务,就好像它托pipe在你的域名上一样。

更新III虽然我不能提供一个现场演示(出于安全原因),这是一个PHP示例代码,解决了同源策略:

文件proxy.php

 $imgData = getimagesize($_GET['img']); header("Content-type: " . $imgData['mime']); echo file_get_contents($_GET['img']); 

这样,而不是从它的原点直接加载外部图像:

 img.src = 'http://some-domain.com/imagefile.png'; 

您可以通过您的代理加载它:

 img.src = 'proxy.php?img=' + encodeURIComponent('http://some-domain.com/imagefile.png'); 

下面是一个用于将图像数据(base64)保存为实际图像的示例php代码:

文件save-image.php

 $data = preg_replace('/data:image\/(png|jpg|jpeg|gif|bmp);base64/','',$_POST['data']); $data = base64_decode($data); $img = imagecreatefromstring($data); $path = 'path-to-saved-images/'; // generate random name $name = substr(md5(time()),10); $ext = 'png'; $imageName = $path.$name.'.'.$ext; // write the image to disk imagepng($img, $imageName); imagedestroy($img); // return the image path echo $imageName; 

所有你需要做的就是将图像数据发布到这个文件,它将把图像保存到光盘,并返回你现有的图像文件名。

当然,这一切可能会有点复杂,但我想告诉你,你正在努力实现的是可能的。

Pixastic图书馆正是你想要的 。 但是,它只能在支持canvas的浏览器上运行。 对于那些较旧的浏览器,您可能需要:

  1. 提供服务器端回退,或者
  2. 告诉用户你很抱歉,但他需要一个更现代的浏览器。

当然,选项#2不是非常用户友好的。 但是,如果您的意图是提供纯粹的纯客户端工具,或者您不能支持回退后端裁剪(例如,您可能正在编写浏览器扩展程序或离线Chrome应用程序,或者您无法承受一个体面的托pipe服务提供商,提供图像操作库),那么限制您的用户群到现代浏览器可能是公平的。

编辑 :如果你不想学习Pixastic,我已经在jsFiddle 这里添加了一个非常简单的收割机。 应该可以通过drawCroppedImage修改和整合和使用drawCroppedImage函数。

#change-avatar-file是一个文件input#change-avatar-file是一个img标签(jcrop的目标)“key”是FR.onloadend事件https://developer.mozilla.org/en-US/docs /networking/ API /的FileReader

 $('#change-avatar-file').change(function(){ var currentImg; if ( this.files && this.files[0] ) { var FR= new FileReader(); FR.onload = function(e) { $('#avatar-change-img').attr( "src", e.target.result ); currentImg = e.target.result; }; FR.readAsDataURL( this.files[0] ); FR.onloadend = function(e){ //console.log( $('#avatar-change-img').attr( "src")); var jcrop_api; $('#avatar-change-img').Jcrop({ bgFade: true, bgOpacity: .2, setSelect: [ 60, 70, 540, 330 ] },function(){ jcrop_api = this; }); } } }); 

如果你仍然使用JCrop,你将只需要这个PHP函数来裁剪文件:

 $img_src = imagecreatefromjpeg($src); $img_dest = imagecreatetruecolor($new_w,$new_h); imagecopyresampled($img_dest,$img_src,0,0,$x,$y,$new_w,$new_h,$w,$h); imagejpeg($img_dest,$dest); 

客户端:

 jQuery(function($){ $('#target').Jcrop({ onChange: showCoords, onSelect: showCoords, onRelease: clearCoords }); }); var x,y,w,h; //these variables are necessary to crop function showCoords(c) { x = cx; y = cy; w = cw; h = ch; }; function clearCoords() { x=y=w=h=0; }