引入:
<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