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
posted on 2019-01-08 20:37 fox_charon 阅读(1273) 评论(0) 编辑 收藏 举报