以传统方式用Vue在PC端使用jquery-cropper

 

引入：

<link href="https://cdn.bootcdn.net/ajax/libs/cropper/4.1.0/cropper.min.css" rel="stylesheet">

 

<script src="https://cdn.bootcdn.net/ajax/libs/cropper/4.1.0/cropper.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cropper/1.0.1/jquery-cropper.min.js"></script>

 

界面：

<!-- Wrap the image or canvas element with a block element (container) -->
<div>
  <img id="image" style="max-width: 100%;" src=""/>
</div>

 

脚本：

这里使用 Vue 的 v-bind 不起作用，如 :src="imgUrl" 写法是无效的。（可能是别的原因导致？）

然后我通过直接操作DOM给<img>元素的src属性赋值，如:

document.getElementById('image').src='图片链接地址';
或
$('#image').attr('src', '图片链接地址';

 

其他：

github文档指路 https://github.com/fengyuanchen/cropper