一款简洁的 image-crop.js图片裁剪工具

TAT_king

已于 2023-04-13 14:02:04 修改

阅读量405

点赞数

分类专栏：前端JS 文章标签： javascript 前端 html

于 2022-09-06 20:04:08 首次发布

本文链接：https://blog.csdn.net/qq_38076201/article/details/126732632

版权

前端JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

用起来还挺方便的

ImageCrop 图片裁剪: javascript原生图片裁剪


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./ImageCrop.js"></script>
    <link href="./ImageCrop.css" rel="stylesheet">
    <title>ImageCrop 2.0</title>
</head>

<body>
    <input id="file" type="file">
    <img id="show">

    <div id="imageCrop"></div>
</body>
<script>
    let imageCrop = new ImageCrop({
        el: "#file",
        watch: true,
        cropWidth: 600,
        cropHeight: 300,
        canvasWidth: 1300,
        canvasHeight: 500,
    });
    
    imageCrop.onChange = (base64, file) => {
        document.querySelector("#show").src = base64;
    }
</script>

</html>

属性	类型	默认值	说明
el	el	null	input[type="file"]
watch	boolean	false	实时回调 onChange方法
cropWidth	number	600	裁剪框宽度
cropHeight	number	300	裁剪框高度
canvasWidth	number	900	画布宽度
canvasHeight	number	450	画布高度
onChange	fn	null	裁剪按钮回调