htmlcanvas图片

HTML Canvas 图片处理详解

Canvas 基础概念

HTML5 <canvas> 元素是一个矩形区域，可通过 JavaScript 动态绘制图形、图像或动画，其核心是 CanvasRenderingContext2D 接口，提供丰富的绘图 API。

绘制图片的基本步骤

1. 获取 Canvas 上下文

   const canvas = document.getElementById('myCanvas');
   const ctx = canvas.getContext('2d');

2. 创建 Image 对象

   const img = new Image();
   img.src = 'example.jpg'; // 图片路径

3. 监听图片加载完成

   img.onload = () => {
     ctx.drawImage(img, 0, 0); // 绘制到画布 (0,0) 位置
   };

常用 API 方法

图片处理技巧

1. 像素级操作

   const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
   // 修改像素数据（如 imageData.data）
   ctx.putImageData(imageData, 0, 0);

2. 图片裁剪与缩放

   ctx.drawImage(img, 50, 50, 200, 200, 0, 0, 300, 300); // 裁剪源图 (50,50) 区域并缩放

3. 旋转与合成

   ctx.save(); // 保存状态
   ctx.translate(150, 150); // 设置旋转中心
   ctx.rotate(Math.PI / 4); // 旋转 45 度
   ctx.drawImage(img, -img.width/2, -img.height/2); // 绘制居中图片
   ctx.restore(); // 恢复状态

性能优化建议

• 离屏 Canvas：用多个离屏 Canvas 分层绘制,减少主画布重绘。
• 请求动画帧：动画场景使用 requestAnimationFrame 替代 setInterval。
• 图片预加载：确保图片加载完成后再绘制,避免渲染中断。

实际应用案例

1. 图片编辑器

   • 通过 drawImage 实现裁剪、缩放、旋转。
   • 结合 getImageData 实现滤镜效果（如灰度化、反相）。

2. 图表绘制

   将图片作为背景，叠加数据图层（如折线图、柱状图）。

3. 动画与游戏

   const dataURL = canvas.toDataURL('image/png');
   const blob = new Blob([atob(dataURL.split(',')[1])], { type: 'image/png' });
   const url = URL.createObjectURL(blob);

   问题2：如何处理跨域图片的绘制问题？

   解答：
   需确保图片服务器允许跨域访问，设置 Access-Control-Allow-Origin 头，若无法控制服务器，可使用代理服务器中转图片，或在