揭秘Vue.js高效图片操作：轻松另存图片，解锁图片处理的全新境界！

引言

图片上传

1. 使用Vue-Core-Image-Upload组件

安装

npm i vue-core-image-upload --save

使用

import VueCoreImageUpload from 'vue-core-image-upload';

new Vue({
  el: '#app',
  components: {
    'vue-core-image-upload': VueCoreImageUpload
  }
});

HTML部分

<vue-core-image-upload
  class="btn btn-primary"
  text="点击上传图片"
  :crop="true"
  :compress="0.9"
  :max-file-size="5242880"
  @imageuploaded="handleImageUploaded"
></vue-core-image-upload>

2. 自定义上传组件

如果你需要更精细的控制，可以创建一个自定义的上传组件。

<template>
  <input type="file" @change="handleFileChange" />
</template>

<script>
export default {
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      // 处理文件，例如上传到服务器
    }
  }
};
</script>

图片裁剪

1. 使用Vue-Core-Image-Upload的裁剪功能

<vue-core-image-upload
  class="btn btn-primary"
  text="点击上传图片"
  :crop="true"
  :crop-ratio="16/9"
  @imageuploaded="handleImageUploaded"
></vue-core-image-upload>

2. 使用fabric.js进行自定义裁剪

fabric.js是一个强大的JavaScript库，可以用于创建和编辑矢量图形和位图图像。

import fabric from 'fabric';

const canvas = new fabric.Canvas('canvas');
// 加载图片
canvas.loadImage('path/to/image.jpg', function(img) {
  const oImg = new fabric.Image(img);
  canvas.add(oImg);
  canvas.renderAll();
  // 裁剪图片
  oImg.scale(0.5);
  canvas.setActiveObject(oImg);
  canvas.renderAll();
});

图片压缩

1. 使用Vue-Core-Image-Upload的压缩功能

<vue-core-image-upload
  class="btn btn-primary"
  text="点击上传图片"
  :compress="0.9"
  @imageuploaded="handleImageUploaded"
></vue-core-image-upload>

2. 使用Canvas API进行压缩

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'path/to/image.jpg';

img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  const compressedImage = canvas.toDataURL('image/jpeg', 0.7);
  // 处理压缩后的图片
};

图片另存为

1. 使用Blob对象

const canvas = document.getElementById('canvas');
const link = document.createElement('a');
const url = canvas.toDataURL('image/png');
link.href = url;
link.download = 'image.png';
link.click();

2. 使用fabric.js保存图片

const canvas = new fabric.Canvas('canvas');
canvas.saveJPEG('image.jpg', {
  quality: 0.7
});

总结