vue图片压缩加水印

要在Vue中进行图片压缩和添加水印的操作，你可以使用第三方库来实现。一个常用的库是`vue2-image-upload`。以下是一个简单的步骤来实现图片压缩和添加水印的功能：

1. 首先，安装`vue2-image-upload`库。你可以使用npm或者yarn命令来安装：

   npm install vue2-image-upload

或者

   yarn add vue2-image-upload

2. 在你的Vue组件中引入`vue2-image-upload`库，并在组件的`data`属性中定义一个`file`变量用于存储上传的图片文件。

   <template>
     <div>
       <image-upload v-model="file"></image-upload>
     </div>
   </template>
   
   <script>
   import ImageUpload from 'vue2-image-upload';
   
   export default {
     components: {
       ImageUpload
     },
     data() {
       return {
         file: null
       };
     }
   };
   </script>

3. 接下来，你可以使用`canvas`来进行图片压缩和添加水印的操作。在你的Vue组件中，创建一个函数来处理图片上传和添加水印的逻辑。

   <script>
   import ImageUpload from 'vue2-image-upload';
   
   export default {
     components: {
       ImageUpload
     },
     data() {
       return {
         file: null
       };
     },
     methods: {
       compressAndWatermark() {
         const image = new Image();
         image.src = URL.createObjectURL(this.file);
   
         image.onload = () => {
           const canvas = document.createElement('canvas');
           const ctx = canvas.getContext('2d');
   
           // 压缩图片到指定尺寸
           const maxWidth = 500; // 设置压缩后的最大宽度
           const ratio = maxWidth / image.width;
           canvas.width = maxWidth;
           canvas.height = image.height * ratio;
           ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
   
           // 在压缩后的图片上添加水印
           ctx.font = '20px Arial';
           ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
           ctx.textAlign = 'center';
           ctx.fillText('Watermark', canvas.width / 2, canvas.height / 2);
   
           // 将压缩后的图片转换为DataURL格式
           const compressedImage = canvas.toDataURL('image/jpeg', 0.8);
   
           // 处理压缩后的图片，比如上传到服务器等操作
           // ...
         };
       }
     }
   };
   </script>

4. 最后，在你的Vue组件中调用`compressAndWatermark`函数来触发图片压缩和添加水印的操作。

   <template>
     <div>
       <image-upload v-model="file"></image-upload>
       <button @click="compressAndWatermark">压缩与添加水印</button>
     </div>
   </template>

通过以上步骤，你可以在Vue中实现图片的压缩和添加水印操作。记得根据你的具体需求调整代码中的参数和样式。