前端图片合成技术_实现web版图片编辑器

在大家修图需求越来越来越旺盛的今天，一款方便且功能强大的图片编辑软件就显得尤为重要。那么现在咱们就来聊一下怎么使用前端技术来实现一些简单的图片编辑功能

1

数字图像

首先我们要对数字图像有一个基本了解：

数字图像，是二维图像用有限数字数值像素的表示。

通常，像素在计算机中保存为二维整数数组的光栅图像，这些值经常用压缩格式进行传输和储存。

数字图像可以许多不同的输入设备和技术生成，例如数码相机、扫描仪、手机相机等。

简单来说，数字图像就是一组像素数据，像素的位置和颜色决定了图像的最终呈现。

还是来看图吧：

像素狗狗

高清图片有更多的像素

这么一看是不是好理解多了~~

对图像的所有处理，在底层实现里都是对这些像素的处理。甚至当我们一些比较复杂或者比较特殊的效果时，我们就需要手动处理像素了。

2

Canvas

相较于其他平台，如果想在浏览器上(前端)处理图像，就必须要借助于浏览器提供的 canvas 元素。有关 canvas 的简介，请自行在MDN查询。

canvas 可以用于绘制图形、制作照片、创建动画，以及可以进行实时视频处理或渲染等功能。有趣的是，你甚至可以借助 WebGL 和 canvas 在网页上绘制 3D 图形，有兴趣的同学可以自行搜索。

限于篇幅，我们直接介绍一下 canvas 常用的接口：

// 创建 canvas 元素const canvas = document.createElement("canvas");// 设置 canvas 宽高canvas.width = 500;canvas.height = 300;// 获取 2d 画布的渲染上下文对象const context = canvas.getContext("2d");// 画布旋转方法，需要传入弧度制格式的旋转角度const rad = 90 * Math.PI / 180;context.rotate(rad);/* 将某一图像绘制在 canvas 上，x、y是图像左上角位于画布的位置 */context.drawImage(img, x, y);// 导出处理过的图片const newImg = canvas.toDataURL("image/png");// 另一种导出方式const newBlob = canvas.toBlob();

上面就是一些常用的 canvas 接口，大家可以先看一些，后面我们会使用到的。

3

旋转和翻转

情景一

有如下一个图片：

经典的莱娜(Lena)图

emmmmm...有点别扭，看来我们需要将它顺时针旋转90°

记不记得上面有个 rotate 方法来着？