Javascript 上载前在浏览器中裁剪图像

我发现的许多库，比如Jcrop，实际上并没有进行裁剪，它只创建了一个图像裁剪UI。然后，它取决于服务器进行实际裁剪

如何在不使用任何服务器端代码的情况下，通过使用HTML5功能在客户端裁剪图像

如果是，是否有一些示例或提示？

库中有。但是，它只能在支持画布的浏览器上工作。对于那些较旧的浏览器，您需要：

提供服务器端回退，或

告诉用户您非常抱歉，但他需要一个更现代的浏览器

当然，选项2对用户不是很友好。但是，如果您的目的是提供纯客户端工具和/或您不支持后备裁剪器（例如，可能您正在编写浏览器扩展或离线Chrome应用程序，或者可能您负担不起提供图像处理库的像样主机提供商），那么，将用户群限制在现代浏览器可能是公平的

编辑：如果您不想学习Pixastic，我在JSFIDLE上添加了一个非常简单的裁剪器。应该可以修改、集成并使用Jcrop的

drawCroppedImage

功能。

是的，可以完成。
它基于锚定标签的新html5“下载”属性。
流程应该是这样的：

加载图像

使用指定的裁剪边界将图像绘制到画布中

从画布获取图像数据，并使其成为dom中锚定标记的

href

属性

将下载属性（

download=“所需文件名”

）添加到该

元素中
就这样。用户只需点击“下载链接”，图像就会下载到他的电脑上

有机会我会带着演示回来

更新
这是我答应过的。它取每个边距的长度和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';

通过这种方式，而不是直接从外部图像的原点加载外部图像：

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;

然后，您所要做的就是将图像数据发布到此文件，它将图像保存到光盘并返回现有的图像文件名

---

当然，这一切可能会让人觉得有点复杂，但我想向您展示，您正在努力实现的目标是可能的。

如果您仍然使用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 = c.x;
    y = c.y;
    w = c.w;
    h = c.h;
};
function clearCoords()
{
    x=y=w=h=0;
}

#更改化身文件

是一个文件输入

#更改化身文件

是一个img标签（jcrop的目标） “键”是FR.onloadend事件

---

可能的重复：1。（这正是你要问的；然而，最上面的答案说这是不可能的，但这是错误的）。2.（与用例略有不同，但最重要的答案正是您想要的）Hi@apsillers，谢谢您的回答。您确定这是在裁剪和调整图像大小吗？我的意思是在裁剪动作之后，我不能下载裁剪后的图像，但我可以只下载原始图像。裁剪后的图像被绘制到画布上。您可以使用

toDataURL

从画布中获取base64编码的图像数据。如果在裁剪后在URL栏中键入

javascript:window.open（$（“#demoimage”）[0].toDataURL（）

，则会看到裁剪后的图像本身。（注意：如果将该代码粘贴到地址栏中，浏览器可能会删除开头的

javascript:

部分；请确保将其重新添加。）你在找吗？不幸的是，Pixastic项目看起来已经死了+1有一个演示会很棒。我也会努力做到这一点。但奇怪的是，网络上还没有这样的例子。我有，谢谢。您认为使用您的示例将图像上传到服务器上合理/可行吗？阅读你的

更新II

似乎我做不到。我说得对吗？是的，可以做到。如果您有图像数据，您所要做的就是将其发布到服务器端页面，并将其写入图像文件。唯一棘手的部分（甚至没有那么棘手）是使用proxy代理外部图像。例如：而不是

http://domain.com/image.png

使用

proxy.php？img=http://domain.com/image.png

。我不知道我是否可以为这个做一个演示，但是你应该知道它是完全可行的：）你的例子给出了错误：SecurityError：操作是不安全的。（img.onload（））+1个很好的例子。你认为我可以用

HTML5画布

来做php代码做的同样的工作吗？我只知道不是每个浏览器都支持HTML5，如果你在服务器上做这项工作，它就不会被黑客攻击。假设我只想为支持

HTML5画布

的浏览器提供服务。我怎么做？有什么例子吗？

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 = c.x;
    y = c.y;
    w = c.w;
    h = c.h;
};
function clearCoords()
{
    x=y=w=h=0;
}

$('#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;
                });
            }
        }
    });