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

Question

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

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

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

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

问题是，我的控制台日志告诉我调整大小函数的 return 值为 "data:,"。然后我开始 console.log 我的出路，缩小问题隐藏的范围。在我的 resizeImage 函数中，我记录了我的 img 元素的宽度，它给了我宽度 0，这不应该是正确的？ ..我不知道我做错了什么..

Answer 1

如果您的目标浏览器支持 file 输入属性，那么您可以使用 URL.createObjectURL 创建可以使用 canvas 元素操作的图像源。

给定所需的最大尺寸 maxW x maxH，您可以计算缩放因子，在保持原始宽高比的同时调整图像大小，如下所示：

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

这是示例代码和演示。

请注意，该演示确实将图像绘制到 canvas，但您可以轻松地将内存中的 canvas 替换为 document.createElement('canvas')。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// limit the image to 150x100 maximum size
var maxW=150;
var maxH=100;

var input = document.getElementById('input');
input.addEventListener('change', handleFiles);

function handleFiles(e) {
  var img = new Image;
  img.onload = function() {
    var iw=img.width;
    var ih=img.height;
    var scale=Math.min((maxW/iw),(maxH/ih));
    var iwScaled=iw*scale;
    var ihScaled=ih*scale;
    canvas.width=iwScaled;
    canvas.height=ihScaled;
    ctx.drawImage(img,0,0,iwScaled,ihScaled);
    alert(canvas.toDataURL());
  }
  img.src = URL.createObjectURL(e.target.files[0]);
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<input type="file" id="input"/>
<br>
<canvas id="canvas" width=300 height=300></canvas>

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

Resize image before sending to BASE64 (without using img element)

javascript

php

base64