H5调用相机拍照并压缩图片

前言

H5调用相机拍照并压缩图片是常见的功能需求，可以实现在移动端网页上直接调用设备的摄像头进行拍照，并将拍摄的照片进行压缩处理后上传到服务器。本文将介绍如何通过H5提供的API来实现这个功能。

代码实现

首先，我们需要使用HTML5的元素，设置type属性为"file"和capture属性为"camera"。这样就可以在移动设备上显示一个调用相机的按钮，当用户点击按钮时，系统会弹出摄像头拍照界面。

接下来，我们通过JavaScript来处理用户拍照后选择的文件。我们可以使用FileReader来读取用户选择的图片，然后将其显示在页面上。

document.getElementById('cameraInput').addEventListener('change', function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function(ev) {
    var img = document.createElement('img');
    img.src = ev.target.result;
    document.body.appendChild(img);
  };
  reader.readAsDataURL(file);
});

最后，我们需要使用Canvas进行图片压缩。将拍照得到的图片绘制到Canvas上，然后通过调整Canvas的大小来实现压缩。最后将处理后的图片上传到服务器。

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var maxWidth = 800;
var maxHeight = 600;

img.onload = function() {
  var width = img.width;
  var height = img.height;
  if (width > height) {
    if (width > maxWidth) {
      height *= maxWidth / width;
      width = maxWidth;
    }
  } else {
    if (height > maxHeight) {
      width *= maxHeight / height;
      height = maxHeight;
    }
  }
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage(img, 0, 0, width, height);

  var compressedDataUrl = canvas.toDataURL('image/jpeg', 0.5);
  // 将压缩后的图片上传到服务器
};

总结

通过使用HTML5的元素和JavaScript的FileReader、Canvas等API，我们可以实现在H5页面中调用设备相机进行拍照，并对拍摄的照片进行压缩处理后上传到服务器。上述代码提供了一个基本的实现思路，可以根据实际需求进行进一步的优化和调整。