祥銘 2019-03-25 23:17 采纳率: 0%
浏览 1376

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>
  • 写回答

1条回答 默认 最新

  • 帅比九日 2024-05-08 14:38
    关注

    需要注意的是，在本地直接打开html文件可能会有跨域问题，如果要调试的话，最好是使用vscode插件开一个本地服务器。
    我一般是vscode安了个Open In Default Browser插件，来实现。
    以下代码复制到一个html中，使用插件打开页面即可查看效果

    img

    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Cropper.js Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.css">
</head>

<body>
    <img id="image" src="" alt="Picture">
    <button id="saveButton">Save Cropped Image</button>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.js"></script>
    <script>
        $(document).ready(function() {
    var $image = $('#image');

    // 新增 - 创建 Image 对象并设置crossOrigin属性
    var img = new Image();
    img.crossOrigin = "anonymous";
    img.src = "./test2.png"; // 替换为你的图片路径
    img.onload = function() {
        $image.attr('src', this.src); // 当图片加载完成后设置到 img 标签中

        // 图片加载完成，初始化Cropper
        var options = {
            aspectRatio: 16 / 9,
            preview: '.img-preview'
        };
        var cropper = new Cropper($image[0], options);

        $('#saveButton').click(function() {
            var canvas = cropper.getCroppedCanvas({
                width: 1600, // 根据需要调整
                height: 900
            });

            canvas.toBlob(function(blob) {
                var url = URL.createObjectURL(blob);
                var a = document.createElement('a');
                a.href = url;
                a.download = 'cropped-image.png'; // 指定下载文件名
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            });
        });
    };
});
    </script>
</body>

</html>
    评论

报告相同问题？

悬赏问题

  • ¥30 win c++ socket
  • ¥15 CanMv K210开发板实现功能
  • ¥15 C# datagridview 栏位进度
  • ¥15 vue3页面el-table页面数据过多
  • ¥100 vue3中融入gRPC-web
  • ¥15 kali环境运行volatility分析android内存文件，缺profile
  • ¥15 写uniapp时遇到的问题
  • ¥15 vs 2008 安装遇到问题
  • ¥15 matlab有限元法求解梁带有若干弹簧质量系统的固有频率
  • ¥15 找一个网络防御专家，外包的