以传统方式用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- 100%;" src=""/>
</div>

脚本:

这里使用 Vue 的 v-bind 不起作用,如 :src="imgUrl" 写法是无效的。(可能是别的原因导致?)

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

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

其他:

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

Higher, faster, stronger!
原文地址:https://www.cnblogs.com/Meiwah/p/13416473.html