jQuery图片剪裁插件Image Cropper使用

初始化剪裁区

• 使用插件 cropper：https://www.jq22.com/jquery-info9322

  • 必须IP+PORT 形式打开页面；

• 步骤：

  • 找到剪裁区的图片 （img#image）

  • 设置配置项

  • 调用cropper方法，创建剪裁区

// ---------------  创建剪裁区
// - 调用cropper方法，创建剪裁区
$('#image').cropper({
  // 纵横比(宽高比)
  aspectRatio: 2/1, // 正方形
  // 指定预览区域
  preview: '.img-preview' // 指定预览区的类名（选择器）
});

上传 选择图片

• 常规：上传图片都是默认的样式，有自己的按钮，样式不好看

• 现在：

  • html中加入一个隐藏的文件域！为什么要隐藏？样式不好看；

  • 点击上传按钮的时候，触发文件域的单击事件；

<!-- 加一个隐藏的文件域 -->
<input type="file" id="file" style="display: none;" accept="image/*">
<button type="button" class="layui-btn">上传</button>

// -------------  点击  上传  ，可以选择图片，触发文件DOM节点；
//  替换上传的按钮id名为 file_cp
$('#file_cp').click(function () {
    $('#file').click();
});

• 需求：更换图片，重置剪裁区；

• 步骤：

  • 1.file 节点的文件更换；$('#file').change()

  • 2.一开始展示的图片是本地的图片地址；更换完后，需要创建图片的临时地址；URL.createObjectURL(fileObj图片的文件对象)

  • 3.查API，跟换图片地址

//找到文件对象（file按钮发生change事件，获取图片地址）
$('#file').on('change', function() {

    //收集图片信息
    //file按钮的一个方法 .files------>返回一个伪数组对象，对象内部显示图片的本地地址
    let fileObj = this.files[0]

    //为选择的图片生成一个临时的url，src返回图片的网路地址
    let src = URL.createObjectURL(fileObj)


    //图片使用了copper插件处理，则设置图片地址时只能使用copper方法设置
    $('#image').cropper("replace", src);

})

确定 剪裁上传

• 步骤：

  • 调用 cropper 方法，传递 getCroppedCanvas 参数，得到一个canvas图片（对象）

  • 调用canvas的toDataURL()方法，得到base64格式的图片

  • ajax提交

let layer;
layui.use('layer', function() {
    layer = layui.layer;





    //点击确认按钮，更新头像图片
    $('#up_img').on('click', function() {

        // 调用插件方法，剪裁图片；剪裁之后得到一张canvas格式的图片
        var canvas = $('#image').cropper('getCroppedCanvas', {
            width: 100,
            height: 100
        });

        // 把canvas图片转成base64格式，得到超长字符串
        var base64 = canvas.toDataURL('image/png');


        //ajax提交url编码，提交字符串，完成更新
        $.ajax({
            type: 'POST',
            url: '/my/update/avatar',
            data: {
                avatar: base64
            },
            success: function(res) {
                layer.msg(res.message);
                if (res.status === 0) {
                    // 重新渲染父页面的头像
                    window.parent.getInfo();
                }
            }
        });

    })
})

使用<iframe></iframe>标签嵌套的页面具有父子关系， window.parent.getInfo();t可以在子页面调用父页面的getInfo()这个函数