html如何截取图片

屏幕

前端技术无法直接截取图片，但可以利用canvas画布技术，通过截取屏幕特定区域生成一个新的图片。具体步骤如下：

1. 创建一个 canvas 元素

html


Java

2. 获取图片并绘制到 canvas 上

Javascript

// 获取图片

const img = document.querySelector('img')

// 将图片绘制到canvas

const canvas = document.querySelector('#canvas')

const ctx = canvas.getcontext('2d')

ctx.drawImage(img, x, y, width, height, 0, 0, width, height)

3. 截取 canvas 指定区域，生成新的图片

Javascript

const newImg = new Image()

newImg.src = canvas.toDataURL('image/png')

document.body.appendChild(newImg)

其中的toDataURL()方法可以将 canvas 转换成一张 base64 编码的图片，可以通过设置参数指定图片格式。新的图片生成后可以通过插入到页面显示。

注意事项：

- 如果图片跨域，则需要服务器配置 Access-Control-Allow-Origin: * 头部

- canvas 绘制图片需要等待图片加载完成后才能进行，因此需要通过 onload 事件等待加载完成再执行绘制相关操作

- 截取的区域参数需要根据实际需求设置，此处示例使用与原始图片相同的尺寸。