如题
请问要如何使用cropper.js的api
将截图保存到本地端download下来
jquery还很菜 所以没什么头绪
目前只做到了预览 选择框图像的画面出来
我是照着github上说的做出来的
一张图片然后框选起来 在class叫做small的格子里显示截图预览
我现在想做一个下载截图的功能
我想到的是 用jQuery click 方法
cropper.js的api 叫做 getCroppedCanvas
然后在里面塞入cropper.js的api 但是这样似乎是不行的?
想请问大神如何把截下来的图片download下来呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.1/cropper.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.1/cropper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.1/cropper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.1/cropper.min.js"></script>
<!--https://blog.csdn.net/weixin_38023551/article/details/78792400 中文文件-->
</head>
<body>
<div class="box">
<img id="image" src="image/picture.jpg">
</div>
<div class="small" style="overflow: hidden;height: 300px;margin-top: 50px;"></div>
<a href="" class="download">Download</a>
<script type="text/javascript">
dwn = document.querySelector('.download');
var img_w=300;
var cropper = new Cropper(image, {
aspectRatio: 16 / 9,
viewMode:1,
preview:".small",
dragMode:"crop",
crop: function (e) {
console.log(e.detail.x);
console.log(e.detail.y);
console.log(e.detail.width);
console.log(e.detail.height);
console.log(e.detail.rotate);
console.log(e.detail.scaleX);
console.log(e.detail.scaleY);
},
});
</script>
</body>
</html>
