Javascript裁剪图像客户端[重复]答案

【问题标题】：Javascript crop image client-side [duplicate]Javascript裁剪图像客户端[重复]
【发布时间】：2011-10-14 10:57:05
【问题描述】：

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

工作流程：

选择图片
将图像裁剪为特定尺寸
压缩裁剪
上传

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

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

【问题讨论】：

我不知道这是否可能。 Facebook 可能会获取您上传的任何图像，在服务器上重新调整它们的大小，然后保存它们。然后，您会在页面上看到重新调整大小的图像。如果您想调整 PHP 代码的大小，我已经开发了一些代码。唯一的问题是我没有为调整大小的 PNG 提供不透明度。
最简单的方法是使用画布。例如：这里是它的 npm 包npmjs.com/package/canvas_image_processing

标签： javascript jquery image-processing

【解决方案1】：

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

你只需要这样做：

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);
}

小菜一碟；）

【讨论】：

评论评论：感谢您的回答，欢迎来到 SO。提示：回答很好，但更感谢解释解决方案的每一步。
mime 必须是 jpeg 而不是 toDataURL('image/jpg', 90); 中的 jpg。感谢您的出色回答。

【解决方案2】：

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

简而言之，JavaScript 并不是为了满足您的要求。无论您遇到何种服务提供了对所选图像的操作能力，您都可以打赌，在提供任何其他功能之前，该图像已完全上传到服务器。

【讨论】：

绝对可以。看看这里：stackoverflow.com/questions/12728188/…
这个答案是在两年前做出的，当时很多 HTML5 的东西甚至还不存在，并且存在的每个执行图像处理的服务都是在服务器端完成的。
我编写 js 代码超过 6 年，我不想争论大约 2 年前可以做什么或不可以做什么。最重要的是，这个话题在我们这个时代仍然是一个热门，它值得一个更新的答案。
我同意，但把自己置于这种情况：你是这个网站的新手，你想知道 OP 在这个问题上想要什么......以及正确和接受答案是：“不！这不可能！”。我不是说当时提出问题时有可能，而是现在是，应该更新答案。想象一下网络（以及 SO）在大多数主题上都充满了过时和错误的资源......那将是一个多么酷的世界？
@gion_13，还有你所指的答案和那里发生的过程纯粹是浏览器所做的，正如 holodoc 所说，JS 仍然不可能。在浏览器的帮助下才有可能

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

Resize & Crop for Jquery (ClientSide)

Pixastic Image Processing Library

HTML5 Canvas Image Optimization

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

【讨论】：