首页 > 解决方案 > Cropper canwas 最小尺寸

问题描述

我在模态中有裁剪器。但我不明白如何设置最小尺寸并将裁剪器设置为圆形?

    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="img-container">
                    <div class="row">
                        <div class="col-md-5">
                            <img id="image" src="https://avatars0.githubusercontent.c/u/3456749">
                        </div>
                    </div>
                </div>
            </div>

和脚本:

  $modal.on('shown.bs.modal', function () {
        cropper = new Cropper(image, {
            aspectRatio: 1,
            viewMode: 4,
            preview: '.preview',
        });
        let height = 300;
        let width = 300;
        var context = canvas.getContext('2d');
        context.imageSmoothingEnabled = true;
        context.drawImage(sourceCanvas, 0, 0, width, height,0,0,320,320);
        context.globalCompositeOperation = 'destination-in';
        context.beginPath();
        context.ellipse(width / 2, height / 2, width / 2, height / 2, 45 * 3.14, 0, 45 * 3.14);
        context.fill();

标签: javascriptcropperjscropper

解决方案


推荐阅读