Question

我已经阅读了几篇文章/ stackoverflow关于调整图片大小以便上传它们的问题。但我没有找到这样的函数：

function resize(src,maxWidth, max Height){
    // some staff, creating a new Canvas and drawing the src inside
    return canvas;
}

到目前为止，我只看过一段代码：

var img = new Image();
img.src=src
img.onload(function(){
    // Creating a Canvas here and do all the needed operations with the Canvas...
}

在这种情况下，我看不到如何获取创建的Canvas。

Answer 1

要创建画布，您只需要这个

var canvas = document.createElement('canvas');
canvas.width = yourwidth;
canvas.height = yourheight;

如果你不问如何创建元素只是告诉我，我会改变答案

Answer 2

以下是调整大小功能的大纲：

使用document.createElement("canvas")创建一个新画布，并为画布创建一个上下文。
创建一个新的Image对象并设置其.src
为新图像创建一个.onload，使用drawImage将调整大小的图像绘制到画布。
返回新的画布元素

示例代码和演示：http://jsfiddle.net/m1erickson/UTjW8/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var imageSource="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png";

    var canvas=resize(imageSource,125,125);

    document.body.appendChild(canvas);


    // scale an image to canvas maintaining an aspect ratio
    function resize(srcURL,maxWidth,maxHeight){
        var tcanvas=document.createElement("canvas");
        var tctx=tcanvas.getContext("2d");
        var img=new Image();
        img.onload=function(){
            var iw=img.width;
            var ih=img.height;
            var ratio = Math.min(maxWidth/iw,maxHeight/ih);
            tcanvas.width=iw*ratio;
            tcanvas.height=ih*ratio;
            tctx.drawImage(img,0,0,iw,ih,0,0,iw*ratio,ih*ratio);
        }
        img.src=srcURL;
        return(tcanvas);
     }

}); // end $(function(){});
</script>
</head>
<body>
</body>
</html>

Answer 3

我一周前遇到过这个问题。我尝试了很多方法，最后只找到了一种方法。你可以成为一个种植者和农民的上传者。调整图像大小并将其上传到服务器。基本思想是在画布中调整图像大小，将画布转换为blob以进行上载，然后将其上载到表单中。详细过程很复杂，所以现在没有免费的插件。

但是，有一个便宜的插件Crop & Upload可以轻松解决您的问题。我已经在我的网站上使用它，它运行得很好。

调整图像大小：在js中返回画布的函数

3 个答案: