调整图片大小，需要一个好的图书馆

Question

首先 - 问题

<小时/> 我正在开发一个Web应用程序，使用户可以使用智能手机，平板电脑拍照或只是在他们的电脑上浏览图片。我需要将此文件上传到我的数据库，该数据库工作正常 IF 图片足够小。

在对某些照片进行了一些实验后，我发现智能手机拍摄的照片尺寸至少为1MB，这也是上传到我的数据库的方式。

上传内容如下：
1.将图像转换为Base64编码的字符串 2.将数组中的字符串（包含字符串）发送到WebAPI
3.将字符串连接成一个并将其转换为字节数组。

我注意到如果文件大约是70-90kb，那么这将是可以插入数据库的文件的最大大小。当我有一个大于100kb的文件时，插入失败。

所以我正在寻找一个好的大小调整库来调整所选图片的大小。我不知道这是否可行，但一切都必须在客户端完成。

技术

<小时/> 我在客户端使用Javascript / jQuery和AngularJS，在WebAPI上使用VB.NET。这是因为我正在实习并且没有其他选择来使用VB.NET。

但是这与问题无关，我只需要找到一种压缩/调整大小/最小化所选文件的方法，这样就可以上传到数据库了。

上传是通过AngularJS的$ http.post（）发生的。

如果有人可以向图书馆提供建议，请注意使用一些基本的示例代码来帮助其他程序员？我几乎无法弄清楚如何使用插件或库，因为我对这一切都很陌生。如果你们能为我提供至少一些让我走上正轨的信息，我将不胜感激。

提前致谢！

很抱歉，我无法提供任何代码或其他内容，它比编码问题更具信息性问题。当我有一个可以使用的库时，这可能会弹出。此外，如果有任何评论，我会考虑他们，因为我有一个截止日期，没有多少时间可以开始解决小问题。除了图像问题之外，其中大部分现在都有效。

Answer 1

您可以使用HTML5 Canvas element在其上模仿图像，然后适当调整大小

您即时创建canvas并对其执行像素操作 - 所以不要担心它在DOM上的任何位置都不可见 - 将其视为虚拟画布

这是我刚才写的一个小脚本（在我不记得的另一个SO问题的帮助下） - 允许你这样做 - 同时保持图像的宽高比：

<强>参数

• 您直接在其中提供image
• 您提供了maxWidth / maxHeight，它将至少保留中的一个
• 它还允许您通过定义degrees参数来旋转图像（这在移动设备上非常有用，因为不同的设备提供任意旋转的图像 - 您会发现这一点如果你正在处理移动设备，很快就会很难）

<强>返回

• 返回已调整大小的图片的Base64字符串

function resizeImg(img, maxWidth, maxHeight, degrees) {
  var imgWidth = img.width,
    imgHeight = img.height;

  var ratio = 1,
    ratio1 = 1,
    ratio2 = 1;
  ratio1 = maxWidth / imgWidth;
  ratio2 = maxHeight / imgHeight;

  // Use the smallest ratio that the image best fit into the maxWidth x maxHeight box.
  if (ratio1 < ratio2) {
    ratio = ratio1;
  } else {
    ratio = ratio2;
  }
  var canvas = document.createElement("canvas");
  var canvasContext = canvas.getContext("2d");
  var canvasCopy = document.createElement("canvas");
  var copyContext = canvasCopy.getContext("2d");
  var canvasCopy2 = document.createElement("canvas");
  var copyContext2 = canvasCopy2.getContext("2d");
  canvasCopy.width = imgWidth;
  canvasCopy.height = imgHeight;
  copyContext.drawImage(img, 0, 0);

  // init
  canvasCopy2.width = imgWidth;
  canvasCopy2.height = imgHeight;
  copyContext2.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvasCopy2.width, canvasCopy2.height);


  var rounds = 1;
  var roundRatio = ratio * rounds;
  for (var i = 1; i <= rounds; i++) {


    // tmp
    canvasCopy.width = imgWidth * roundRatio / i;
    canvasCopy.height = imgHeight * roundRatio / i;

    copyContext.drawImage(canvasCopy2, 0, 0, canvasCopy2.width, canvasCopy2.height, 0, 0, canvasCopy.width, canvasCopy.height);

    // copy back
    canvasCopy2.width = imgWidth * roundRatio / i;
    canvasCopy2.height = imgHeight * roundRatio / i;
    copyContext2.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvasCopy2.width, canvasCopy2.height);

  } // end for

  canvas.width = imgWidth * roundRatio / rounds;
  canvas.height = imgHeight * roundRatio / rounds;
  canvasContext.drawImage(canvasCopy2, 0, 0, canvasCopy2.width, canvasCopy2.height, 0, 0, canvas.width, canvas.height);


  if (degrees == 90 || degrees == 270) {
    canvas.width = canvasCopy2.height;
    canvas.height = canvasCopy2.width;
  } else {
    canvas.width = canvasCopy2.width;
    canvas.height = canvasCopy2.height;
  }

  canvasContext.clearRect(0, 0, canvas.width, canvas.height);
  if (degrees == 90 || degrees == 270) {
    canvasContext.translate(canvasCopy2.height / 2, canvasCopy2.width / 2);
  } else {
    canvasContext.translate(canvasCopy2.width / 2, canvasCopy2.height / 2);
  }
  canvasContext.rotate(degrees * Math.PI / 180);
  canvasContext.drawImage(canvasCopy2, -canvasCopy2.width / 2, -canvasCopy2.height / 2);


  var dataURL = canvas.toDataURL();
  return dataURL;
}

这是一个有效的代码段，允许您从文件系统上传并动态调整大小：

/*
-------------------------------
-------HANDLE FILE UPLOAD------
-------------------------------
*/

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

function handleFiles(e) {
  var img = new Image;
  img.src = URL.createObjectURL(e.target.files[0]);
  img.onload = function() {
    var base64String = resizeImg(img, 300, 300, 0); //HERE IS WHERE THE FUNCTION RESIZE IS CALLED!!!!
    alert(base64String);
    document.getElementById('previewImg').src = base64String;
  }
}



/*
-------------------------------
-------RESIZING FUNCTION-------
-------------------------------
*/


function resizeImg(img, maxWidth, maxHeight, degrees) {
  var imgWidth = img.width,
    imgHeight = img.height;

  var ratio = 1,
    ratio1 = 1,
    ratio2 = 1;
  ratio1 = maxWidth / imgWidth;
  ratio2 = maxHeight / imgHeight;

  // Use the smallest ratio that the image best fit into the maxWidth x maxHeight box.
  if (ratio1 < ratio2) {
    ratio = ratio1;
  } else {
    ratio = ratio2;
  }
  var canvas = document.createElement("canvas");
  var canvasContext = canvas.getContext("2d");
  var canvasCopy = document.createElement("canvas");
  var copyContext = canvasCopy.getContext("2d");
  var canvasCopy2 = document.createElement("canvas");
  var copyContext2 = canvasCopy2.getContext("2d");
  canvasCopy.width = imgWidth;
  canvasCopy.height = imgHeight;
  copyContext.drawImage(img, 0, 0);

  // init
  canvasCopy2.width = imgWidth;
  canvasCopy2.height = imgHeight;
  copyContext2.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvasCopy2.width, canvasCopy2.height);


  var rounds = 1;
  var roundRatio = ratio * rounds;
  for (var i = 1; i <= rounds; i++) {


    // tmp
    canvasCopy.width = imgWidth * roundRatio / i;
    canvasCopy.height = imgHeight * roundRatio / i;

    copyContext.drawImage(canvasCopy2, 0, 0, canvasCopy2.width, canvasCopy2.height, 0, 0, canvasCopy.width, canvasCopy.height);

    // copy back
    canvasCopy2.width = imgWidth * roundRatio / i;
    canvasCopy2.height = imgHeight * roundRatio / i;
    copyContext2.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvasCopy2.width, canvasCopy2.height);

  } // end for

  canvas.width = imgWidth * roundRatio / rounds;
  canvas.height = imgHeight * roundRatio / rounds;
  canvasContext.drawImage(canvasCopy2, 0, 0, canvasCopy2.width, canvasCopy2.height, 0, 0, canvas.width, canvas.height);


  if (degrees == 90 || degrees == 270) {
    canvas.width = canvasCopy2.height;
    canvas.height = canvasCopy2.width;
  } else {
    canvas.width = canvasCopy2.width;
    canvas.height = canvasCopy2.height;
  }

  canvasContext.clearRect(0, 0, canvas.width, canvas.height);
  if (degrees == 90 || degrees == 270) {
    canvasContext.translate(canvasCopy2.height / 2, canvasCopy2.width / 2);
  } else {
    canvasContext.translate(canvasCopy2.width / 2, canvasCopy2.height / 2);
  }
  canvasContext.rotate(degrees * Math.PI / 180);
  canvasContext.drawImage(canvasCopy2, -canvasCopy2.width / 2, -canvasCopy2.height / 2);


  var dataURL = canvas.toDataURL();
  return dataURL;
}

/*
-------------------------------
-------UNNECESSARY CSS---------
-------------------------------
*/

@import url(http://fonts.googleapis.com/css?family=Lato);
 .container {
  margin: 0 auto;
  width: 400px;
  height: 400px;
  box-shadow: 1px 1px 1px 1px gray;
}
h3,
h4,
h5,
h6 {
  margin: 4px !important;
}
.container,
.container * {
  display: block;
  margin: 12px auto;
  font-family: 'Lato';
}
.header {
  background-color: #2196F3;
  padding: 12px;
  color: #fff;
}
.container input {
  width: 128px;
  height: 32px;
  cursor: pointer;
}
.container img {
  display: block;
  margin: 12px auto;
}

<div class="container">
  <div class="header">
    <h3>Choose a file</h3>
    <h6>and I will alert back to you the base64 string of it's resized version</h6>
  </div>
  <input type="file" id="input" />
  <hr>
  <h5>Image Preview:</h5>
  <img id="previewImg" src="" />

</div>