HTML5在线如何构建图片编辑器 HTML5在线图像工具的完整教程

<input type="file" id="upload" accept="image/*">
<canvas id="editor" width="800" height="600"></canvas>
<div class="controls">
  <button id="grayscale">灰度化</button>
  <button id="rotate">旋转90°</button>
  <button id="download">下载图片</button>
</div>

const canvas = document.getElementById('editor');
const ctx = canvas.getContext('2d');
const upload = document.getElementById('upload');
<p>upload.addEventListener('change', (e) => {
const file = e.target.files[0];
const reader = new FileReader();</p><p>reader.onload = function(event) {
const img = new Image();
img.onload = function() {
// 保持原始宽高比缩放至画布
const scale = Math.min(canvas.width / img.width, canvas.height / img.height);
const w = img.width <em> scale;
const h = img.height </em> scale;
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, w, h);
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
});</p>

document.getElementById('grayscale').addEventListener('click', () => {
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;
<p>for (let i = 0; i < data.length; i += 4) {
const gray = (data[i] + data[i+1] + data[i+2]) / 3;
data[i]     = gray; // R
data[i+1]   = gray; // G
data[i+2]   = gray; // B
}
ctx.putImageData(imageData, 0, 0);
});</p>

document.getElementById('download').addEventListener('click', () => {
  const link = document.createElement('a');
  link.download = 'edited-image.png';
  link.href = canvas.toDataURL('image/png');
  link.click();
});