在一些业务场景中,常常需要前端对图片进行操作,这样可以将部分的性能压力转移到前端设备,有利于减小服务器压力,下面讲解前端怎么操作图片。
首先,对图片的操作都是依赖于canvas画布,这里对canvas标签不再赘述,无论在小程序、H5、PC,各种前端框架都会有canvas的方法,或基于canvas的封装,在环境方面我们无需担心,只需要注意调用 Api 不同,实现相同的功能。其次,对图片的各种操作也会在下面讲到。
对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()
可以构造
标签
对
标签src属性赋值可以引入图片资源
图像必须加载完毕后才能拿到图片渲染后的信息,比如宽高
//下面是一个获取图片宽高的例子
let img = new Image();
img.src = "./pic.jpeg";
img.onload = function () {
console.log(img.width, img.height);
}
在 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)
}
在上一个例子中,图片需要逆时针旋转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)
}
转移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)
}
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)
}