logo标签列表

JavaScript客户端裁剪图像

javascriptjqueryimage-processing
9
我想使用javascript或jQuery在客户端裁剪和压缩图像，然后再上传到服务器。
工作流程：
1. 选择图像 2. 裁剪图像到特定的尺寸 3. 压缩裁剪后的图像 4. 上传
有人做过这个吗？需要使用哪个插件或者我该怎么做？
我看到Facebook可以在上传之前自动压缩和调整图像大小。
我不确定这是否可能。Facebook可能会获取您上传的任何图像，在服务器上重新调整大小，然后保存它们。然后您将在页面上看到调整大小的图像。如果您需要PHP的调整大小代码，我有一些自己开发的。唯一的问题是我还没有让PNG格式的调整大小图片透明度正常工作。 - James
最简单的方法是使用Canvas。例如：这里有一个npm包 https://www.npmjs.com/package/canvas_image_processing - user3517175
4个回答
20

您可以使用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);
}

易如反掌 ;)

4
感谢您的回答并欢迎来到SO。只是一个提示：回答很好，但更加赞赏的是解释您解决问题的每个步骤。 - m_x
mime类型需要是jpeg而不是jpg，在*toDataURL('image/jpg', 90)*中。感谢您提供的好答案。 - Kareem
6

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

简单地说，JavaScript并不适合您所要求的操作。无论您遇到哪个服务都提供了操作选定图像的能力，您可以打赌在提供任何其他功能之前，该图像已完全上传到服务器。

1
肯定可以做到。在这里看一下：https://dev59.com/n2cs5IYBdhLWcg3wlFA2#12730031 - gion_13
2
这个答案是两年前做出的，当时很多HTML5的东西甚至还不存在，每个执行图像处理的服务都是在服务器端完成的。 - user188654
1
我已经编写 JavaScript 超过 6 年了，我不想争论 2 年前可能或不可能发生的事情。关键是，这个主题在我们这个时代仍然是一个热门话题，它值得得到一个更新的答案。 - gion_13
3
我同意，但请设身处地地想一下：你是这个网站的新手，你想知道提问者在这个问题中想要什么...... 而正确的和被接受的答案是：“不行！无法完成！”我并不是说在当时提问时可以实现，但现在是可以的，答案应该更新。想象一下网页（以及SO）上大部分主题的资源都是过时和错误的...... 那将会是多么糟糕的世界啊！ - gion_13
2
@gion_13，但你所提到的答案和过程纯粹是浏览器执行的，正如holodoc所说，使用JS仍然不可能。只有在浏览器的帮助下才能实现。 - azerafati
显示剩余2条评论
3
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接