以传统方式用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 

 

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

上一篇:解决Linux Mint 20下使用Chrome Version 84.0.4147.105 点击网页地址栏,地址栏消失的问题的一种间接办法


下一篇:http中get和post能否同时使用