2020-01-10 vue-cropper图片裁剪

最新推荐文章于 2024-07-08 10:15:35 发布

xumaozeng

最新推荐文章于 2024-07-08 10:15:35 发布

阅读量298

点赞数 2

分类专栏： Vue JavaScript 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/xumaozeng/article/details/103927687

版权

本文介绍如何在Vue项目中利用vue-cropper组件进行图片裁剪。无论图片来自本地上传、远程FTP还是视频截取，都需要将图片转化为file对象。详细步骤包括：1. 本地上传通过el-upload组件获取file；2. 图片url转换为file；3. 使用vue-cropper初始化裁剪区；4. 裁剪并利用daycaca处理截取的图片信息，将其转化为file以供接口使用。

摘要由CSDN通过智能技术生成

2020-01-10 vue-cropper图片裁剪

- - 获取图片文件file
  - 文件file初始化到裁剪区

需求：对本地上传、远程FTP上传和视频截取三种方式的获得图片放入裁剪区进行裁剪

无论哪种方式，都需要得到裁剪图片的文件file，然后通过window.URL.createObjectURL方法取得图片url，最后通过vue-cropper组件裁剪图片产出图片信息

获取图片文件file

1、本地上传通过组件el-upload(element-ui)中的钩子函数获得上传图片的file
2、通过其它方式获得图片url，首先要把url转为图片file
图片url转换为file的方法：包括跨域

export const imgConvert = {
   
  /**
   * 图片url获取base64数据（如果是跨域图片需要设置允许跨域）
   * @param img
   * @param width
   * @param height
   * @returns {
   {dataURL: string, type: string}}
   */
  getBase64Image(img, width, height) {
   
    let demoCanvas = document.createElement('canvas')
    demoCanvas.width = img.width;
    demoCanvas.height = img.height;
    const ctx = demoCanvas.getContext("2d")
    ctx.drawImage(img, 0, 0, width, height);
    const ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
    const dataURL = demoCanvas.toDataURL("image/" + ext);
    return {
   
      dataURL: dataURL,
      type: "image/" + ext
    };
  },
  /**
   * 图片base64 转为blob
   * @param base64
   * @returns {Blob}
   */
  convertBase64UrlToBlob(base64) {
   
    const urlData = base64.dataURL;
    const type = base64.type;
    const bytes = window.