vue-cropper 图片裁剪（修改裁剪框的位置） vue1

Vue-cropper 是一个基于 Vue.js 的图片裁剪组件，它允许用户在网页上通过拖拽等操作来裁剪图片。使用该组件时，你可以很方便地添加图片裁剪功能到你的项目中，用户可以通过它选择需要裁剪的区域，并且裁剪框（也就是选区）的位置和大小是可以调整的。

要在 Vue 1.x 版本中使用 vue-cropper 并修改裁剪框的位置，你需要首先安装 vue-cropper 组件，然后在你的 Vue 实例中引入并注册该组件。可以通过 npm 或者 yarn 来安装：

npm install vue-cropper --save
# 或者
yarn add vue-cropper

然后在你的 Vue 组件中引入并使用它：

<template>
  <div>
    <vue-cropper
      ref="myCropper"
      :src="imageSrc"
      @init="initCrop"
      @ready="ready"
      @done="doneCrop"
    ></vue-cropper>
    <button @click="moveCropper">移动裁剪框</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper';

export default {
  components: {
    VueCropper
  },
  data() {
    return {
      imageSrc: 'your-image-url.jpg' // 设置图片地址
    };
  },
  methods: {
    initCrop(cropper) {
      // 初始化裁剪器实例，可设置初始参数，例如裁剪框大小等
    },
    ready(cropper) {
      // 裁剪器准备就绪后调用
    },
    doneCrop(img) {
      // 裁剪完成后的回调函数，返回裁剪后的图片
      console.log(img);
    },
    moveCropper() {
      // 通过引用 vue-cropper 实例来移动裁剪框
      this.$refs.myCropper.moveCropper(10, 10); // 参数为 x 轴和 y 轴的移动距离
    }
  }
};
</script>

在上面的代码中，`moveCropper` 方法通过引用 `vue-cropper` 的实例并调用 `moveCropper` 方法来移动裁剪框。你可以在适当的位置，比如按钮点击事件中调用这个方法来实现裁剪框位置的修改。