vue-cropper 截图组件踩坑记

安装

npm install --save vue-cropper

封装组件 

<template>
  <vueCropper height="562px"
  ref="cropper" :img="imgUrl"
  :outputSize="option.size"
  :outputType="option.outputType"
  :info="true" :guides="true"
  :high='option.high' :fixed="true"
  :full="option.full" :canMove="option.canMove"
  :canMoveBox="option.canMoveBox"
  :original="option.original"
  :autoCrop="option.autoCrop"
  :autoCropWidth="option.autoCropWidth"
  :autoCropHeight="option.autoCropHeight"
  :fixedBox="option.fixedBox"
  :fixedNumber="option.fixedNumber"
	:maxImgSize="option.maxImgSize"
  @realTime="realTime" :infoTrue="option.infoTrue"
  @imgLoad="imgLoad">
  </vueCropper>
</template>
<script>
// 引入组件
import { VueCropper } from "vue-cropper";
export default {
  components: {
    VueCropper
  },
  props: {
    imgUrl: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      option: {
        img: "",
        size: 1,
        full: true,
        outputType: "png",
        canMove: false,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        high: true,
        autoCropWidth: 252,
        autoCropHeight: 140,
        fixedBox: false,
        infoTrue: false,
        downImg: "#",
        fixed: true,
		fixedNumber: [16, 9],
		maxImgSize: 3000 // 图片最大像素
		}
    };
  },
  methods: {
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    finish(type) {
      // 输出
      var test = window.open("about:blank");
      test.document.body.innerHTML = "图片生成中..";
      if (type === "blob") {
        this.$refs.cropper.getCropBlob(data => {
					var img = window.URL.createObjectURL(data);
          this.model = true;
          this.modelSrc = img;
        });
      } else {
        this.$refs.cropper.getCropData(data => {
          this.model = true;
          this.modelSrc = data;
        });
      }
    },
    realTime(data) {
      // 实时预览函数
      let imgAxis = this.$refs.cropper.getImgAxis();
      let cropAxis = this.$refs.cropper.getCropAxis();
      let cropImgX = cropAxis.x1 - imgAxis.x1;
	  let cropImgY = cropAxis.y1 - imgAxis.y1;
      data.x = cropImgX;
	  data.y = cropImgY;
	  // 把数据返给父组件		
      this.$emit("getPreview", data);
    },
    down(type) {
      // event.preventDefault()
      var aLink = document.createElement("a");
      aLink.download = "author-img"; // 输出
      if (type === "blob") {
        this.$refs.cropper.getCropBlob(data => {
          console.log(data);
          this.downImg = window.URL.createObjectURL(data);
          // aLink.download = this.downImg;
          console.log(this.downImg);
          aLink.href = window.URL.createObjectURL(data);
          aLink.click();
        });
      } else {
        this.$refs.cropper.getCropData(data => {
          this.downImg = data;
          aLink.href = data;
          aLink.click();
        });
      }
    },
    uploadImg(e, num) {
      // 上传图片;
      // this.option.img;
      var file = e.target.files[0];
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
        return false;
      }
      var reader = new FileReader();
      reader.onload = e => {
        let data;
        if (typeof e.target.result === "object") {
          // 把Array Buffer转化为blob 如果是base64不需要;
          data = window.URL.createObjectURL(new Blob([e.target.result]));
        } else {
          data = e.target.result;
        }
        if (num === 1) {
          this.option.img = data;
        } else if (num === 2) {
          this.example2.img = data;
        }
      }; // 转化为base64;
      reader.readAsDataURL(file); // 转化为blob reader.readAsArrayBuffer(file)
    },
    imgLoad(msg) {
      console.log(msg);
		}
	}
};
</script>
<style scoped>
</style>

 使用封装的组件

 截图框

<cropImg :imgUrl="option.img" @getPreview="getPreview" />

预览框

<div class="preview">
     <img :src="previews.url" :style="previews.img">
</div>

效果图

截图框                                                                                                                                                    预览框

 

效果可以实现了,但是不满足业务需求

现在的效果是预览框图片的大小是由截图框的大小决定的

而现实的业务需求是不管截图框再小,哪怕10 * 10,也要求能够占满预览框400 * 200

经过与组件作者沟通,组件不能 实现此类需求

解决方案:

一、将图片转换为base64,根据坐标计算,生成一张新的图片填充到预览框中,效果可以实现,但是预览框图片卡顿非常明                显, 用户体验不好

二、实现思路,根据预览框与截图框的比例重新计算,图片大小、坐标以及截图框大小

      

if (data.w < 400) {
	// 截取图片宽度
	let h = parseFloat(data.img.height);
	let w = parseFloat(data.img.width);
	// 截图框大小
	let previewWidth = data.w;
	let previewHeight = data.h;
	// 起始点坐标
	let x = data.x;
	let y = data.y;
	// 处理截图框坐标超出图片的情况
	if (x < 0) {
		x = 0;
	}
	if (y < 0) {
		y = 0;
	}
	// 获取scale
	let transRatio = parseFloat(data.img.transform.substring(6, 13));
	// 放大比例 400是预览框宽
	let ratio = 400 / data.w;
	// y放大比例 225是预览框高 225是根据截图框宽高比计算的
	let inversey = 225 / data.h;
	// 拿到transform
	let trans = data.img.transform;
	let transx = parseFloat(trans.substr(trans.indexOf("-") + 1, 8));
	let transy = parseFloat(trans.substr(trans.lastIndexOf("-") + 1, 8));
	// 重新赋值
	data.img.height = ratio * h + "px";
	data.img.width = ratio * w + "px";
	data.x = ratio * x;
	data.y = ratio * y;
	data.img.transform = "scale(" + transRatio + ", " + transRatio + ") translate3d(-" + transx * ratio + "px, -" + transy * ratio + "px, 0px) rotateZ(0deg)";
	// 截图框大小
	data.w = previewWidth * ratio;
	data.h = previewHeight * inversey;
}

 经过计算之后,效果图如下

截图框                                                     预览框

左侧 135 * 76                             右侧 400 * 225 

拖动截图框,页面很流畅,没有卡顿

实现方法,已经贡献给作者,在vue-cropper     0.4.5版本中已经可以实现此功能

 三、图片跨域问题,需要后端配合,设置服务器 access-control-allow-origin: *

四、发现截图坐标误差问题,后经排查发现是,组件默认图片大小不能超过2000像素,根据业务需求改为3000像素

  • 5
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
你好!关于Vue裁剪组件,我推荐你使用vue-cropper组件。它是一个功能强大且易于使用的图片裁剪工具,可以在Vue项目中方便地集成和使用。 Vue-cropper提供了一些常见的图片裁剪功能,包括缩放、旋转、翻转、裁剪框调整等。你可以使用它来实现用户上传图片后的裁剪操作,适用于头像上传、图片编辑等场景。 使用vue-cropper组件很简单,首先你需要安装它: ``` npm install vue-cropper ``` 然后,在你的Vue组件中引入并使用它: ```vue <template> <div> <vue-cropper ref="cropper" :src="imageUrl" :config="cropperConfig" ></vue-cropper> <button @click="cropImage">裁剪图片</button> </div> </template> <script> import VueCropper from 'vue-cropper'; export default { components: { VueCropper, }, data() { return { imageUrl: 'https://example.com/image.jpg', cropperConfig: { aspectRatio: 1, // 裁剪框宽高比例 viewMode: 1, // 显示模式:0表示自由模式,1表示限制裁剪框在图片内 dragMode: 'move', // 拖拽模式 }, }; }, methods: { cropImage() { const cropper = this.$refs.cropper.getCropper(); const croppedImageData = cropper.getCroppedCanvas().toDataURL(); // 处理裁剪后的图片数据 }, }, }; </script> ``` 以上是一个简单的示例代码,其中`imageUrl`是待裁剪的图片地址,`cropperConfig`是裁剪工具的配置选项。你可以根据自己的需求自定义配置。 在裁剪按钮点击事件中,我们通过`this.$refs.cropper.getCropper()`获取裁剪实例,然后使用`.getCroppedCanvas().toDataURL()`方法获取裁剪后的图片数据,你可以根据需要对其进行进一步的处理。 希望这个组件能满足你的需求,如果还有其他问题,请随时提问!
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值