cropper.js 实现裁剪图片并上传(PC端)

摘要:cropper.js 实现裁剪图片并上传(PC端),主要是利用 cropper 插件和 h5 的 canvas 画布,然后将图片转成 base64 上传提交到后台。

cropper.js 实现裁剪图片并上传(PC端)

主要是利用 cropper 插件和 h5 的 canvas 画布,然后将图片转成 base64 上传提交到后台。轮子已经有人造好,是在 cropper 官方的插件上修改的。当然也可以自己去 cropper 官网将插件源码下载回来按照自己的实际业务场景修改。

我是结合官网教程和插件源码在轮子上面又稍加修改才使用的,以下是后台使用 php 处理的 base64 图片格式。

<?php
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64, $result)) {
    $imageBody = base64_decode(str_replace($result[1], '', $base64));
    $imageExt = $result[2];

    // $imageBody 是解码好的图片 base64 内容,可以添加使用 php file_put_contents 函数写成图片文件,也可以传入到第三方腾讯或者阿里的对象存储
    // $imageExt 是解析出来的上传图片的格式后缀
}


参考资料:

cropper 插件地址:https://fengyuanchen.github.io/cropper/

轮子地址:https://www.jianshu.com/p/b252a7cbcf0b

轮子源码地址:https://github.com/mygit8366/Head_Cut_PC

结束语:感谢您对本网站文章的浏览,欢迎您的分享和转载,但转载请说明文章出处。
Top