Javascript Javascript裁剪图像客户端

Javascript crop image client-side

提问by Shawn Mclean

I'd like to use javascript or jQuery to crop and compress an image on the client side before uploading to the server.

我想在上传到服务器之前使用 javascript 或 jQuery 在客户端裁剪和压缩图像。

WorkFlow:

工作流程：

1. Select Image
2. Crop Image to specific size
3. Compress the crop
4. Upload

1. 选择图像
2. 将图像裁剪为特定尺寸
3. 压缩作物
4. 上传

Has anyone done this before? What plugin or what do I have to do?

以前有人这样做过吗？什么插件或我必须做什么？

I see facebook can do compressing images and automatically resizing them before uploading.

我看到 facebook 可以在上传之前压缩图像并自动调整它们的大小。

采纳答案by brezanac

EDIT (2014):This answer is now obsolete! JavaScript is a programming language with implementations that are deeply influenced by what browser resources are being made available to them. Three years ago when this post was made (July 2011) browsers didn't have any kind of reliable functionality which would allow OP to do what he asked for, hence my answer.
If you are still interested in how this can be done now please consult some of the many answers to this question which have appeared in the meantime on SO. But please restrain yourself from making any further comments to this answer because its obviously pointless. Thank you.

编辑（2014）：这个答案现在已经过时了！JavaScript 是一种编程语言，其实现深受浏览器资源可用的影响。三年前，当这篇文章发表时（2011 年 7 月），浏览器没有任何可靠的功能可以让 OP 做他要求的事情，因此我的回答是。
如果您现在仍然对如何做到这一点感兴趣，请查阅同时出现在 SO 上的这个问题的许多答案中的一些。但是请克制自己不要对这个答案发表任何进一步的评论，因为它显然毫无意义。谢谢你。

Simply put JavaScript is not meant to do what you are asking for. Whatever service you encounter that offers the ability to manipulate selected images you can bet your money that the image has been uploaded completely to the server before any other functionality was offered.

简单地说，JavaScript 并不意味着要做你所要求的。无论您遇到什么能够处理选定图像的服务，您都可以打赌，在提供任何其他功能之前，图像已完全上传到服务器。

回答by Adriano Spadoni

You can do it using base64, look to the website I'm working with: http://www.wordirish.comall images are manipulated on client side using HTML5 or flash for old browsers.

您可以使用 base64，查看我正在使用的网站：http: //www.wordirish.com所有图像都在客户端使用 HTML5 或旧浏览器的 Flash 进行操作。

you just need do it:

你只需要这样做：

function thisFunctionShoulBeCallByTheFileuploaderButton(e){
    e.preventDefault && e.preventDefault();
    var image, canvas, i;
    var images = 'files' in e.target ? e.target.files : 'dataTransfer' in e ? e.dataTransfer.files : [];
    if(images && images.length) {
        for(i in images) {  
            if(typeof images[i] != 'object') continue;
            image = new Image();
            image.src = createObjectURL(images[i]);
            image.onload =  function(e){
                var mybase64resized = resizeCrop( e.target, 200, 150 ).toDataURL('image/jpg', 90);
                alert(mybase64resized);
            }
        }           
    }
}

function resizeCrop( src, width, height ){
    var crop = width == 0 || height == 0;
    // not resize
    if(src.width <= width && height == 0) {
        width  = src.width;
        height = src.height;
    }
    // resize
    if( src.width > width && height == 0){
        height = src.height * (width / src.width);
    }

    // check scale
    var xscale = width  / src.width;
    var yscale = height / src.height;
    var scale  = crop ? Math.min(xscale, yscale) : Math.max(xscale, yscale);
    // create empty canvas
    var canvas = document.createElement("canvas");                  
    canvas.width  = width ? width   : Math.round(src.width  * scale);
    canvas.height = height ? height : Math.round(src.height * scale);
    canvas.getContext("2d").scale(scale,scale);
    // crop it top center
    canvas.getContext("2d").drawImage(src, ((src.width * scale) - canvas.width) * -.5 , ((src.height * scale) - canvas.height) * -.5 );
    return canvas;
}

function createObjectURL(i){ 
    var URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
    return URL.createObjectURL(i);
}

piece of cake ;)

小菜一碟 ;）

回答by sandstrom

You can crop them using HTML5 Canvas:

您可以使用 HTML5 Canvas 裁剪它们：

http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

回答by Chibueze Opata

Modern browsers now support a lot of image manipulation via jquery and html5 canvas. Tools that can be used to achieve this include:

现代浏览器现在支持通过 jquery 和 html5 canvas 进行大量图像处理。可用于实现此目的的工具包括：

Resize & Crop for Jquery (ClientSide)

Jquery 的调整大小和裁剪（客户端）

Pixastic Image Processing Library

Pixastic 图像处理库

HTML5 Canvas Image Optimization

HTML5 Canvas 图片优化

I hope that proves useful for anyone looking for similar solutions...

我希望这对寻找类似解决方案的人有用......