使用canvas把照片旋转任意角度

__畫戟__

已于 2022-04-27 10:20:40 修改

阅读量5.9k

点赞数 2

分类专栏： Charts H5 文章标签： canvas画图片并旋转转换 ctx.translate ctx.drawImage ctx.rotate canvas 修改坐标系原点

于 2022-04-26 23:07:41 首次发布

本文链接：https://blog.csdn.net/qq_41887214/article/details/124439591

版权

H5 同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

Charts

4 篇文章 1 订阅

订阅专栏

今天想着更新下水印 watermark-plus，增加图片水印功能。

这样需要将图片画成 canvas，并且在画之前还要支持任意角度的旋转图片。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>旋转转换</title>
  <style>
      canvas {
        border: 1px solid red;
      }
  </style>
</head>
<body>
<canvas width="600" height="400">您的浏览器版本过低,请升级浏览器</canvas>
<script src="index.js"></script>
<script>
</script>
</body>
</html>

index.js

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 400;
const rotate = 0;

// 画两条相交垂线做观察
context.moveTo(0, canvas.height / 2);
context.lineTo(canvas.width, canvas.height / 2);
context.stroke();

context.beginPath();
context.moveTo(canvas.width / 2, 0);
context.lineTo(canvas.width / 2, canvas.height);
context.stroke();

// 1. 实例化Image对象
const img = new Image();
// 2. 给Image对象设置src属性
img.src = '../images/my.svg';
img.setAttribute('crossOrigin', 'Anonymous');
// 3. 浏览器读取图片时间  需要等待图片读取完成
img.onload = () => {
  // 4. 平移转换，改变画笔的原点位置为画布的中心点
  context.translate(canvas.width / 2, canvas.height / 2);
  // 5. 旋转转换，改变画笔的旋转角度
  context.rotate((rotate * Math.PI) / 180);
  // 6. 调用绘制图片的方法把图片绘制到canvas中
  context.drawImage(img, 0, 0);
};

可以得到下面的图
在这里插入图片描述

这个时候上下文画笔的坐标系原点已经是画布的中心点了，图片的起始点在坐标系原点，这个时候我们利用 context.drawImage 的第二第三参数将图片中心点平移至坐标系原点

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 400;
const rotate = 0;

// 画两条相交垂线做观察
context.moveTo(0, canvas.height / 2);
context.lineTo(canvas.width, canvas.height / 2);
context.stroke();

context.beginPath();
context.moveTo(canvas.width / 2, 0);
context.lineTo(canvas.width / 2, canvas.height);
context.stroke();

const img = new Image();

img.src = '../images/my.svg';
img.setAttribute('crossOrigin', 'Anonymous');

img.onload = () => {
  // 平移转换，改变画笔的原点位置为画布的中心点
  context.translate(canvas.width / 2, canvas.height / 2);
  // 旋转转换，改变画笔的旋转角度
  context.rotate((rotate * Math.PI) / 180);
  // 调用绘制图片的方法把图片绘制到canvas中
  context.drawImage(img, -img.width / 2, -img.height / 2);
};

这是画布内容就是下面图片了：
在这里插入图片描述

可以看到图片已经居中了，那么下面我们调整旋转角度测试一下

将旋转角度改为30
在这里插入图片描述

将旋转角度改为90
在这里插入图片描述

将旋转角度改为220
在这里插入图片描述

将旋转角度改为330
在这里插入图片描述

可以看到，图片一直以上下文坐标系原点为中心旋转，而上下文坐标系原点此时为画布的中心点；

那么说到这里你应该联想到了，上下文坐标系的原点被改变了，在后面的整个上下文画笔的坐标系都将会改变

因此我们需要将坐标系恢复到原有正常的状态，这时候就需要使用 restore()了

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 400;
const rotate = 330;

// 画两条相交垂线做观察
context.moveTo(0, canvas.height / 2);
context.lineTo(canvas.width, canvas.height / 2);
context.stroke();

context.beginPath();
context.moveTo(canvas.width / 2, 0);
context.lineTo(canvas.width / 2, canvas.height);
context.stroke();

const img = new Image();

img.src = '../images/my.svg';
img.setAttribute('crossOrigin', 'Anonymous');

img.onload = () => {
  // 平移转换，改变画笔的原点位置为画布的中心点
  context.translate(canvas.width / 2, canvas.height / 2);
  // 旋转转换，改变画笔的旋转角度
  context.rotate((rotate * Math.PI) / 180);
  // 调用绘制图片的方法把图片绘制到canvas中
  context.drawImage(img, -img.width / 2, -img.height / 2);

  // 还原坐标系
  context.translate(-canvas.width / 2, -canvas.height / 2);
  context.rotate(-rotate * (Math.PI / 180));
  // 使用 restore()进行恢复
  context.restore();
};

这个时候的画布内容是没有变化的，还是我们想要的结果
在这里插入图片描述

__畫戟__

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用canvas把照片旋转任意角度

使用canvas把照片旋转任意角度；conext.translate；context.rotate；context.drawImage；context.restore；修改canvas坐标系原点；
复制链接

扫一扫