HTML5+Canvas调用手机拍照功能实现图片上传（上）

HTML5+Canvas调用手机拍照功能实现图片上传（上）是一种前端技术，通过使用HTML5+Canvas实现对手机设备相机的调用，实现拍照、选图后上传的功能。下面将从以下标准的markdown格式文本中详细讲解HTML5+Canvas调用手机拍照功能实现图片上传的完整攻略：

准备工作

准备一台具有相机功能的设备，如安卓或iOS手机。
了解HTML5、Canvas和JavaScript等前端技术。
选用一种适合自己的Web开发工具，如Sublime Text、Visual Studio Code等。

具体实现步骤

步骤一：呈现拍照功能

在网页中添加HTML5的<input>标签，并设置type属性为file，accept属性为image/*，并添加capture属性设置为camera，以呈现拍照功能：

<input type="file" accept="image/*" capture="camera">

步骤二：读取图片

通过JavaScript获取<input>标签元素，并调用FileReader()方法来读取图片，并将读取到的图片呈现出来：

var input = document.querySelector('input[type="file"]');
input.onchange = function() {
  var file = input.files[0];
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = function() {
    var tempImg = new Image();
    tempImg.src = reader.result;
    tempImg.onload = function() {
      // 在canvas中呈现图片
    }
  }
}

步骤三：在Canvas中呈现图片

通过Canvas将读取到的图片呈现出来，并添加裁剪框实现对图片进行裁剪：

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var canvasWidth = canvas.clientWidth;
var canvasHeight = canvas.clientHeight;

var tempImg = new Image();
tempImg.src = reader.result;
tempImg.onload = function() {
  // 计算图片宽高
  var imgWidth = tempImg.width;
  var imgHeight = tempImg.height;
  if (imgWidth > canvasWidth) {
    imgHeight *= canvasWidth / imgWidth;
    imgWidth = canvasWidth;
  }
  if (imgHeight > canvasHeight) {
    imgWidth *= canvasHeight / imgHeight;
    imgHeight = canvasHeight;
  }
  // 在canvas中呈现图片
  ctx.drawImage(tempImg, 0, 0, imgWidth, imgHeight);

  // 添加裁剪框
  var clipWidth = canvasWidth / 2;
  var clipHeight = canvasHeight / 2;
  var clipX = canvasWidth / 4;
  var clipY = canvasHeight / 4;
  ctx.strokeStyle = 'blue';
  ctx.lineWidth = 2;
  ctx.strokeRect(clipX, clipY, clipWidth, clipHeight);
}

步骤四：保存图片

在Canvas呈现图片后，用户可以裁剪图片。添加保存按钮，将裁剪后的图片保存为Base64编码，并提交给后端进行处理。

var saveBtn = document.querySelector('#saveBtn');
saveBtn.onclick = function() {
  var data = canvas.toDataURL('image/jpeg');
  // 使用ajax提交数据
  // ...
}

示例说明

示例一：调用相机拍摄并呈现图片

用户可以通过示例代码，调用自己设备的相机，拍摄一张照片，并将其呈现出来。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML5+Canvas调用手机拍照功能实现图片上传（上）</title>
</head>
<body>
  <input type="file" accept="image/*" capture="camera">
  <canvas></canvas>
  <button id="saveBtn">保存</button>

  <script>
    var input = document.querySelector('input[type="file"]');
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var canvasWidth = canvas.clientWidth;
    var canvasHeight = canvas.clientHeight;

    input.onchange = function() {
      var file = input.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onloadend = function() {
        var tempImg = new Image();
        tempImg.src = reader.result;
        tempImg.onload = function() {
          var imgWidth = tempImg.width;
          var imgHeight = tempImg.height;
          if (imgWidth > canvasWidth) {
            imgHeight *= canvasWidth / imgWidth;
            imgWidth = canvasWidth;
          }
          if (imgHeight > canvasHeight) {
            imgWidth *= canvasHeight / imgHeight;
            imgHeight = canvasHeight;
          }
          ctx.drawImage(tempImg, 0, 0, imgWidth, imgHeight);
          var clipWidth = canvasWidth / 2;
          var clipHeight = canvasHeight / 2;
          var clipX = canvasWidth / 4;
          var clipY = canvasHeight / 4;
          ctx.strokeStyle = 'blue';
          ctx.lineWidth = 2;
          ctx.strokeRect(clipX, clipY, clipWidth, clipHeight);
        }
      }
    }

    var saveBtn = document.querySelector('#saveBtn');
    saveBtn.onclick = function() {
      var data = canvas.toDataURL('image/jpeg');
      console.log(data);
    }
  </script>
</body>
</html>

示例二：裁剪并上传图片

用户可以通过使用示例代码，调用自己设备的相机，拍摄照片，并进行裁剪，最后将裁剪后的图片保存在后端中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML5+Canvas调用手机拍照功能实现图片上传（上）</title>
</head>
<body>
  <input type="file" accept="image/*" capture="camera">
  <canvas></canvas>
  <button id="saveBtn">保存</button>

  <script>
    var input = document.querySelector('input[type="file"]');
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var canvasWidth = canvas.clientWidth;
    var canvasHeight = canvas.clientHeight;
    var clipWidth = canvasWidth / 2;
    var clipHeight = canvasHeight / 2;
    var clipX = canvasWidth / 4;
    var clipY = canvasHeight / 4;

    input.onchange = function() {
      var file = input.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onloadend = function() {
        var tempImg = new Image();
        tempImg.src = reader.result;
        tempImg.onload = function() {
          var imgWidth = tempImg.width;
          var imgHeight = tempImg.height;
          if (imgWidth > canvasWidth) {
            imgHeight *= canvasWidth / imgWidth;
            imgWidth = canvasWidth;
          }
          if (imgHeight > canvasHeight) {
            imgWidth *= canvasHeight / imgHeight;
            imgHeight = canvasHeight;
          }
          ctx.drawImage(tempImg, 0, 0, imgWidth, imgHeight);
          ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
          ctx.fillRect(0, 0, canvasWidth, canvasHeight);
          ctx.clearRect(clipX, clipY, clipWidth, clipHeight);
          ctx.strokeStyle = 'blue';
          ctx.lineWidth = 2;
          ctx.strokeRect(clipX, clipY, clipWidth, clipHeight);
        }
      }
    }

    var saveBtn = document.querySelector('#saveBtn');
    saveBtn.onclick = function() {
      var data = canvas.toDataURL('image/jpeg');
      // 使用ajax提交数据
      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/savePhoto');
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
      xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
          console.log(xhr.responseText);
        }
      }
      xhr.send('photoData=' + encodeURIComponent(data));
    }
  </script>
</body>
</html>

通过上述两个示例的实现，可以成功地使用HTML5+Canvas调用手机拍照功能实现图片上传的功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML5+Canvas调用手机拍照功能实现图片上传（上） - Python技术站