cropper.js 二次开发：截图并下载图片

cropper.js 是一个基于jquery的图片截取库。

参考：https://blog.csdn.net/weixin_38023551/article/details/78792400

我的代码也是基于这个同学的demo。

全程代码很长，所以我只贴出我改了的部分。

代码：

    $("#getCroppedCanvas").on("click", function () {
        console.log($('#image').cropper('getCroppedCanvas'));;
        var cas=$('#image').cropper('getCroppedCanvas');
        var base64url=cas.toDataURL('image/jpeg');

        console.log(base64url); //生成base64图片的格式
        $('.cavans').html(cas)  //在body显示出canvas元素

        var a = document.createElement('a');   // 转换完成，创建一个a标签用于下载
        a.download = 'image' + new Date().getTime() + '.jpeg';
        a.href = base64url;
        $("body").append(a);    // 修复firefox中无法触发click
        a.click();
        $(a).remove();
    })

红色的部分是我加的，其余是原来就有的。

本身自动触发下载不是一件复杂的事，造一个a标签，在触发click事件就行了。

你在使用canvas的时候可能会遇到跨域的问题。

我的解决办法是chrome扩展程序 Allow-Control-Allow-Origin: * 。

开这个扩展时就相当于服务端开了跨域，这个看network可以看出来。

关于跨域可以参考：https://segmentfault.com/q/1010000008648867