js原生图片上传加水印

要实现图片上传加水印，可以使用以下步骤：

1. 创建一个表单元素来上传图片，并为其添加一个change事件监听器。

<form>
  <input type="file" name="image" id="image" accept="image/*">
</form>

2. 在change事件监听器中获取用户选择的图片，并创建一个Image对象。

const input = document.getElementById('image');
input.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const image = new Image();
  image.src = URL.createObjectURL(file);
});

3. 在Image对象的load事件监听器中绘制图片并添加水印。

image.addEventListener('load', () => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0);
  ctx.font = 'bold 20px sans-serif';
  ctx.fillStyle = 'white';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText('Watermark', image.width / 2, image.height / 2);
  canvas.toBlob((blob) => {
    // 将blob对象上传到服务器
  }, 'image/png', 1);
});

在这个例子中，我们使用了Canvas API来绘制图片和水印。我们首先创建一个canvas元素，并获取它的2D绘图上下文。然后，我们将Image对象绘制到canvas上，再使用fillText方法添加水印。

最后，我们将canvas转换为blob对象，并将其上传到服务器。