Guidebook

# Canvas图片绘制

# Canvas图片绘制

# 使用Canvas drawImage绘制图片

drawImage (opens new window)

  • image 绘制到上下文的元素。

  • sx 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 X 轴坐标。

  • sy 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 Y 轴坐标。

  • dx image左上角在canvas上X轴的坐标

  • dy

  • dw 即dWidth image在目标canvas上绘制的宽度

    允许对绘制的image进行缩放。 如果不说明， 在绘制时image宽度不会缩放。

  • dh 即dHeight image在目标canvas上绘制的高度

    允许对绘制的image进行缩放。 如果不说明， 在绘制时image高度不会缩放。

# drawImage的方法有三种情况

1.三个参数

// drawImage(image: CanvasImageSource, dx: number, dy: number): void

const canvas = document.createElement("canvas")
const ctx = canvas.getContext("2d")
ctx.drawImage(image, dx, dy)
1
2
3
4
5

2.五个参数

// drawImage(image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void
ctx.drawImage(image, dx, dy, dw, dh)
1
2

3.9个参数(用于切片)，通俗的说就是将图片进行特定裁剪然后放到指定的位置

// drawImage(image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void
ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
1
2

# 已有图片，将img标签中的图片绘制到canvas中

const canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 227;
if (!canvas.getContext) {
  console.log("不支持canvas");
}
const ctx = canvas.getContext("2d");
// 获取图片元素
let img = document.querySelector("img");
document.body.appendChild(canvas);

img.onload = () => {
  ctx.drawImage(img, 0, 0);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 从零开始创建图片

let img = document.createElement("img"); // 创建img元素
        img.classList.add("obj");
        img.file = selectedFile;


const canvas = document.createElement("canvas");
if (!canvas.getContext) {
	console.log("不支持canvas");
}
const ctx = canvas.getContext("2d");
img.onload = () => {
  ctx.drawImage(img, 0, 0); // 绘制图片
};
preview.appendChild(canvas);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

三：根据上面drawImage参数的三种情况，我们来分别实现，看看效果

1：ctx.drawImage(image,dx,dy)：将原始图片绘制到canvas中

img.onload = () => {
  ctx.drawImage(img, 0, 0); // 原始大小绘制图片
};
1
2
3

2：ctx.drawImage(image,dx,dy,dw,dh)：给图片设置大小绘制到canvas中

img.onload = () => {
  ctx.drawImage(img, 0, 0, 320, 160); // 设置图片大小绘制图片
};
1
2
3

3:ctx.drawImage(image,sx, sy, sw, sh, dx, dy, dw, dh)：切片，将图片进行特定裁剪然后放到指定的位置

img.onload = () => {
  ctx.drawImage(img, 0, 0, 320, 160, 10, 10, 200, 250); // 设置图片大小绘制图片
};
1
2
3

关于ctx.drawImage(img, 0, 0) 画出来的图是300*150大小的，这是因为canvas的默认画布大小为300×150。

设置画布大小

const canvas = document.createElement("canvas");
canvas.width = 300; // 设置画布宽度
canvas.height = 227; // 设置画布高度
if (!canvas.getContext) {
  console.log("不支持canvas");
}
const ctx = canvas.getContext("2d");
//创建图片
let img = document.querySelector("img");
img.onload = () => {
  ctx.drawImage(img, 0, 0);
};
document.body.appendChild(canvas);
1
2
3
4
5
6
7
8
9
10
11
12
13

# 将canvas输出为image

1.图片无法绘制，转成的base64 用浏览器打开是空的透明画布

原因是图片还没加载完就输出了

将canvas.toDataURL("image/png"); 写在img.onload内后又报错

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
1

大概意思是canvas无法执行toDataURL方法：污染的画布无法输出

受限于 CORS 策略，会存在跨域问题

/** @format */

const canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 227;
if (!canvas.getContext) {
  console.log("不支持canvas");
}
/**
 * 原图2560*1440
 */
const toWidth = 1920;
const toHeight = (1920 / 2560) * 1440;
canvas.width = toWidth;
canvas.height = toHeight;
const ctx = canvas.getContext("2d");
//创建图片
let img = document.querySelector("img");
document.body.appendChild(canvas);

// img.setAttribute("crossOrigin", "Anonymous");
img.onload = () => {
  ctx.drawImage(img, 0, 0, toWidth, toHeight);
  const dataURL = canvas.toDataURL("image/png");

  const img1 = new Image();
  img1.src = dataURL;
  img1.width = 160;
  document.body.append(img1);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# HTMLCanvasElement.toDataURL()

方法返回一个包含图片展示的 data URI (opens new window) 。可以使用 type 参数其类型，默认为 PNG (opens new window) 格式。图片的分辨率为96dpi。

← 文件下载 →