前端截图插件cropper用法包括向后台传输数据方式

最新推荐文章于 2024-05-21 10:41:43 发布

五花毛

最新推荐文章于 2024-05-21 10:41:43 发布

阅读量960

点赞数

分类专栏： JavaScript 文章标签： cropper 前端截图 base64转file canvas鼠标画图

本文链接：https://blog.csdn.net/Hanhanyoona/article/details/88945838

版权

最近项目中遇到一个需求,要求前端实现截图,并使用canvas描边,然后以文件流的方式传给后台.记录一下在实现这一过程中主要的几个步骤: base64转为file,canvas鼠标画线.

关于cropper的使用可以参考:https://blog.csdn.net/weixin_38023551/article/details/78792400,作者写的比较详细,这里就不再赘述.

使用cropper的getCroppedCanvas()方法可以获得一个截图的画布,使用toDataURL()将canvas画布内容转化为base64,再向后台传输,但是由于图片太大(30MB的图片,甚至更大)可能造成浏览器卡死,所以将其转为file传给后台.

base64转为file:

function converBase64UrlToBlob(base64) {
        var bytes = window.atob(base64, split(',')[1])
        var ab = new ArrayBuffer(bytes.length)
        var ia = new Uint8Array(ab)
        for (var i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i)
        }

        return new Blob([ab], {
            type: 'image/jpeg'
        })
    }

使用canvas鼠标画线:

<!DOCTYPE html>
<

最低0.47元/天解锁文章

五花毛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端截图插件cropper用法包括向后台传输数据方式

最近项目中遇到一个需求,要求前端实现截图,并使用canvas描边,然后以文件流的方式传给后台.记录一下在实现这一过程中主要的几个步骤: base64转为file,canvas鼠标画线.关于cropper的使用可以参考:https://blog.csdn.net/weixin_38023551/article/details/78792400,作者写的比较详细,这里就不再赘述....
复制链接

扫一扫