Javascript 在发送到BASE64之前调整图像大小（不使用img元素）

编辑：我不想在客户端显示图像，目的是缩小图像并缩放…

在将图像上传到服务器之前，我在调整图像大小时遇到了一些问题，该图像是使用表单中的文件输入选择的

我有以下代码监视我的文件输入：

// monitor file inputs and trigger event
$(document).on('change', '.btn-file :file', function() {

    var F = this.files;
    if(!isImage( F[0] ))
    {
        alert("Not an image file"); 
    }

    var fileurl = resizeImage(F[0]);
    console.log(fileurl);               

    var input = $(this),label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [label]);
});

此函数将调用resizeImage，如下所示：

function resizeImage(file)
{
    var MAX_WIDTH = 800;
    var MAX_HEIGHT = 600;

    var img = document.createElement("img");
    img.src = window.URL.createObjectURL(file);
    console.log(img.width);         

    var canvas = document.createElement('canvas');

    var width = img.width;
    var height = img.height;

    if (width > height) {
      if (width > MAX_WIDTH) {
        height *= MAX_WIDTH / width;
        width = MAX_WIDTH;
      }
    } else {
      if (height > MAX_HEIGHT) {
        width *= MAX_HEIGHT / height;
        height = MAX_HEIGHT;
      }
    }
    canvas.width = width;
    canvas.height = height;

    var ctx = canvas.getContext("2d");

    ctx.drawImage(img, 0, 0, width, height);
    console.log(ctx);       
    var dataurl = canvas.toDataURL("image/png");
    return dataurl;
}

var scale=Math.min((maxW/img.width),(maxH/img.height));

---

问题是，我的控制台日志告诉我resize函数的返回值是“data:，”。然后我开始用console.log来解决这个问题，以缩小问题的范围。在我的resizeImage函数中，我记录了img元素的宽度，它给了我一个0的宽度，这个宽度不应该是正确的。。我不知道我做错了什么。

如果您的目标浏览器支持

文件

输入属性，那么您可以使用

URL.createObjectURL

创建一个可以使用canvas元素操作的图像源

给定所需的最大尺寸

maxW x maxH

，您可以计算缩放因子，在保持原始纵横比的同时调整图像大小，如下所示：

function resizeImage(file)
{
    var MAX_WIDTH = 800;
    var MAX_HEIGHT = 600;

    var img = document.createElement("img");
    img.src = window.URL.createObjectURL(file);
    console.log(img.width);         

    var canvas = document.createElement('canvas');

    var width = img.width;
    var height = img.height;

    if (width > height) {
      if (width > MAX_WIDTH) {
        height *= MAX_WIDTH / width;
        width = MAX_WIDTH;
      }
    } else {
      if (height > MAX_HEIGHT) {
        width *= MAX_HEIGHT / height;
        height = MAX_HEIGHT;
      }
    }
    canvas.width = width;
    canvas.height = height;

    var ctx = canvas.getContext("2d");

    ctx.drawImage(img, 0, 0, width, height);
    console.log(ctx);       
    var dataurl = canvas.toDataURL("image/png");
    return dataurl;
}

var scale=Math.min((maxW/img.width),(maxH/img.height));

以下是示例代码和演示。

请注意，演示确实将图像绘制到画布上，但您也可以轻松地用

document.createElement（“画布”）替换内存中的画布


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
//将图像最大大小限制为150x100
var-maxW=150；
var maxH=100；
var input=document.getElementById（'input'）；
input.addEventListener（'change'，HandleFile）；
功能手柄（e）{
var img=新图像；
img.onload=函数（）{
var iw=img.宽度；
var ih=img.高度；
变量标度=数学最小值（（maxW/iw），（maxH/ih））；
var iw标度=iw*标度；
var ih标度=ih*标度；
canvas.width=iwScaled；
canvas.height=ihScaled；
ctx.drawImage（img，0,0，iw缩放，ih缩放）；
警报（canvas.toDataURL（））；
}
img.src=URL.createObjectURL（e.target.files[0]）；
}
body{背景色：象牙；}
#画布{边框：1px纯红；}



为什么要用JS而不是CSS来做这件事？@COOOL如何用CSS缩小/调整图像大小。。使用
背景图像
和
背景大小：封面
或
背景大小：包含
（取决于您的需要）？使用PHP服务器端。PHP可以很容易地做到这一点。Javascript不能。@DTH，如果您在画布上绘制的img与网页不在同一域中，则
toDataURL
将返回一个空url。禁止跨域是出于安全考虑。谢谢MarkE，这正是我想要的