Cropper.js 裁剪图片，并利用 FormData 对象将裁剪图片生成 Blob 数据上传到服务器（使用canvas实现水印、圆角效果，适应浏览器暗黑模式）

 1、HTML

  <div class="form-group sync-to-img hidden">
    <label for="Admin-Image-img_cut" class="col-sm-2 col-md-1 col-lg-1  control-label">图片裁剪</label>
    <div class="col-sm-10 col-md-11 col-lg-11" style="width: 580px">
        <div id="Admin-Image-img_cut-state" class="uploader-list"></div>
        <div id="Admin-Image-img_cut-show">
            <?php if(isset($data['img_url']) && $data['img_url']){echo '<img style="max-width: 100%;" id="img-cut" src="'.$data['img_url'].'">'; } ?>
        </div>
        <input style="margin: 10px 0; width: 150%;" type="text" class="form-control" id="figure-img" name="figure_img" />
        <input type="hidden" id="figure-type" name="figure_type" value="" />
        <button type="button" id="save-cuted-img">确定裁剪</button>
    </div>
  </div>
 <canvas id="cv" width="600" height="400" class="hidden"></canvas>

 

2、js

    let $image = $('#img-cut');
    $image.cropper({
        viewMode: 1,
        aspectRatio:600/400,
        zoomable: false,
        crop: function(event) { }
    });
    // Get the Cropper.js instance after initialized 有损压缩
    let cropper = $image.data('cropper');
    $('body').on('click', '#save-cuted-img', function(event) {
        event.preventDefault();
　　　　　// 防止canvas数据量过大
        cropper.getCroppedCanvas({ maxWidth: 2048, maxHeight: 2048 }).toBlob((blob) => {
            const formData = new FormData();
            formData.append('file', blob , 'croppedImage1.png');
            $.ajax({
                type:"POST",
                url:"<?php echo U('Upload/ajax_file'); ?>",
                processData: false,
                contentType: false,
                data: formData,
                dataType: 'json',
                beforeSend: function () {
                    $('#save-cuted-img').text('正在上传...').prop('disabled', true);
                },
                success: function(re){
                    if (re.success) {
                        $('#figure-img').val(re.msg);
                        $('#figure-type').val($('#Admin-Image-type_id option:selected').text());
                        alert("裁剪图片上传成功");
                    } else {
                        alert(re.msg);
                    }
                },
                error() {
                    console.log('裁剪图片上传失败');
                },
                complete: function () {
                    $('#save-cuted-img').text('确定裁剪').prop('disabled', false);
                }
            });
        }, 'image/png', 1); // 设置图片质量
    });

扩展2.1
图片底部加文字水印，顶部圆角，底部直角，适应浏览器dark暗黑模式

P.S. 开启暗黑模式

1、浏览器地址输入 chrome://flags/
2、搜索dark
3、设置开启

const canvas = document.getElementById('cv');
const ctx = canvas.getContext('2d');

// 设置主图不透明白底
ctx.globalAlpha = 1;
ctx.fillStyle = '#ffffff';
ctx.beginPath();
ctx.roundRect(0, 0, canvas.width, canvas.height, [14,14,0,0]); // 顶部圆角，底部直角
ctx.fill();
ctx.save();
ctx.clip();

/* 1. 离屏 canvas（600×370）用于绘制图片圆角效果 */
const off = document.createElement('canvas');
off.width  = croppedImg.width;
off.height = croppedImg.height;
const offCtx = off.getContext('2d');
offCtx.fillStyle = '#fff';
offCtx.beginPath();
offCtx.roundRect(0, 0, off.width, off.height, [14]); // 图片圆角
offCtx.fill();
offCtx.save();
offCtx.clip();
// 将图片绘制到离线canvas
offCtx.drawImage(croppedImg, 0, 0);
// 将离线canvas绘制到主图
ctx.drawImage(off, 0, 0);

// 添加水印
ctx.font = '16px Roboto,Light';
ctx.fillStyle = 'black';
ctx.fillText(watermarkText, 2, watermarkTextY);

 

 

3、参考资料
https://gitee.com/Fairy01/cropperJs-document#getcropboxdata
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob