图片处理的实战经验

2023-10-20 02:20:56

图片处理在 H5 和小程序中的实践

图片旋转

在用户拍摄横屏照片却想在竖屏设备上显示的情况下，旋转图片就变得非常必要。我们可以借助 HTML5 Canvas 和 CSS3 Transform 轻松实现图片旋转。

HTML5 Canvas 图片旋转

HTML5 Canvas 提供了灵活的方式来旋转图片。通过创建一个 Canvas 元素，绘制图片，然后利用 rotate() 方法指定旋转角度，即可轻松实现。

<canvas id="canvas" width="300" height="300"></canvas>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0);
  ctx.rotate(Math.PI / 2);
  ctx.drawImage(image, 0, 0);
};
image.src = 'image.jpg';

CSS3 Transform 图片旋转

CSS3 Transform 同样支持图片旋转。只需为图片元素添加 transform 属性，并指定 rotate() 函数和旋转角度即可。

<img src="image.jpg" style="transform: rotate(90deg);">

图片压缩

图片压缩在节约带宽和提高加载速度方面至关重要。使用原生 JavaScript 和第三方库，我们可以轻松实现图片压缩。

原生 JavaScript 图片压缩

原生 JavaScript 允许我们通过创建一个 Image() 对象，监听 onload 事件，利用 toDataURL() 和 createObjectURL() 方法将图片转换成 Data URL，再将其转换为可下载的 URL，从而实现图片压缩。

var image = new Image();
image.onload = function() {
  var canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0);
  var dataURL = canvas.toDataURL('image/jpeg', 0.5);
  var url = URL.createObjectURL(dataURL);
  var a = document.createElement('a');
  a.href = url;
  a.download = 'image.jpg';
  a.click();
  URL.revokeObjectURL(url);
};
image.src = 'image.jpg';

第三方库图片压缩

Imagemin 和 Jpeg-js 等第三方库提供了便捷的图片压缩功能，无需编写复杂代码。

imagemin(['image.jpg'], 'dist/', {
  plugins: [
    imagemin.jpegtran({progressive: true}),
    imagemin.optipng({optimizationLevel: 5})
  ]
});

图片上传

HTML5 的 file 元素可用于选择图片，然后通过 FileReader API 将其转换成 Data URL。借助 XMLHttpRequest 或 fetch() API，我们可以将 Data URL 上传到服务器。

<input type="file" id="image-input">

var input = document.getElementById('image-input');
input.addEventListener('change', function() {
  var file = input.files[0];
  var reader = new FileReader();
  reader.onload = function() {
    var dataURL = reader.result;
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php');
    xhr.setRequestHeader('Content-Type', 'application/octet-stream');
    xhr.send(dataURL);
  };
  reader.readAsDataURL(file);
});