jquery的cropper.js 插件把截取的图片保存到本地端的写法。

如题
请问要如何使用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>

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问