在一些业务场景中，常常需要前端对图片进行操作，这样可以将部分的性能压力转移到前端设备，有利于减小服务器压力，下面讲解前端怎么操作图片。
首先，对图片的操作都是依赖于canvas画布，这里对canvas标签不再赘述，无论在小程序、H5、PC，各种前端框架都会有canvas的方法，或基于canvas的封装，在环境方面我们无需担心，只需要注意调用 Api 不同，实现相同的功能。其次，对图片的各种操作也会在下面讲到。
这个是原图可以下载下来作测试用
1、前期的简单认识
对canvas的简单认识
-
默认坐标原点 (0,0) 在左上角，X坐标向右方延伸，Y坐标向下方延伸
-
如果对画布进行旋转，坐标系也会跟着旋转
-
坐标系是可以进行坐标系变换的，即原点、X轴方向、Y轴可变
-
在canvas上绘制图像，图像必须加载完毕，否则会出现空白
<html>
<body>
<canvas id="canvas" />
</body>
<script>
let canvas = document.getElementById("canvas")
canvas.width = 200
canvas.height = 200
let ctx = canvas.getContext("2d")
ctx.fillStyle = 'pink';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
</html>
** 对image的简单认识**
-
new Image()可以构造<img>标签 -
对
<img>标签src属性赋值可以引入图片资源 -
图像必须加载完毕后才能拿到图片渲染后的信息，比如宽高
//下面是一个获取图片宽高的例子
let img = new Image();
img.src = "./pic.jpeg";
img.onload = function () {
console.log(img.width, img.height);
}
2、canvas绘制图片
在 canvas 上绘制图像，可以使用 drawImage() 方法，具体参数查看MDN
-
drawImage(image, dx, dy) 在画布指定位置绘制原图
-
drawImage(image, dx, dy, dw, dh) 在画布指定位置上按原图大小绘制指定大小的图
-
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 剪切图像，并在画布上定位被剪切的部分
目前使用到的就是 drawImage(image, dx, dy, dw, dh)
let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d")
let img = new Image();
img.src = "./pic.jpeg";
img.onload = function () {
let { width, height } = img
canvas.width = width
canvas.height = height
ctx.drawImage(img, 0, 0)
}
3、canvas旋转图片
在上一个例子中，图片需要逆时针旋转90度才能摆正，所以我们需要将画布逆时针旋转，并且要让画布在canvas中位置正确，不然会出现旋转过后图片消失或者被截取，因为canvas只会绘制在它宽高内的内容 注意，如果需要进行连续的旋转，步骤会更复杂，可以每次旋转都重置画布
let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d")
let img = new Image();
img.src = "./pic.png";
img.onload = function () {
let { width, height } = img
// canvas交换宽高
canvas.width = height
canvas.height = width
// 图片逆时针旋转90度后
ctx.rotate(-90 * Math.PI / 180);
// 旋转后调整绘制的位置下移一个宽度的距离
ctx.drawImage(img, -width, 0)
}
4、图片转译base64格式
转移base64方法有很多，大概就是读取文件的API类作转换
这里我们其实可以直接使用canvas的方法
// 使用canvas.toDataURL，传参控制输入类型 、质量
let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d")
let img = new Image();
img.src = "./pic.png";
img.onload = function () {
let { width, height } = img
canvas.width = width
canvas.height = height
ctx.drawImage(img, 0, 0)
// 转编译一定要在图像绘制完毕以后
let base64= canvas.toDataURL("image/jpeg", 1)
console.log(base64)
}
5、canvas生成图片保存到本地
这里使用
<a>标签的download属性进行下载，步骤就是创建一个a标签再触发点击事件保存到本地，最后移除a标签
let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d")
let img = new Image();
img.src = "./pic.png";
img.onload = function () {
let { width, height } = img
canvas.width = width
canvas.height = height
ctx.drawImage(img, 0, 0)
let base64 = canvas.toDataURL("image/jpeg", .5)
// 保存到本地
let a = document.createElement("a");
a.href = base64
a.download = "美少女战士"
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
