在javascript中编辑图像

<canvas id="myCanvas" width="500" height="500"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var image = new Image();
image.src = "image.jpg";

image.onload = function() {
  ctx.drawImage(image, 0, 0);
};

// 绘制矩形
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

// 绘制文本
ctx.font = "20px Arial";
ctx.fillStyle = "blue";
ctx.fillText("Hello, World!", 200, 200);

// 应用滤镜
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
  // 修改像素值
  data[i] = 255 - data[i]; // 红色通道取反
}
ctx.putImageData(imageData, 0, 0);

// 导出为文件
var dataURL = canvas.toDataURL("image/png");
var link = document.createElement("a");
link.href = dataURL;
link.download = "edited_image.png";
link.click();

// 显示在页面上
document.body.appendChild(canvas);