JQuery 插件图片裁剪插件cropper.js使用,上传

SHERlocked93 发布于2019-08-22 13:46 / 3270人阅读

摘要：图片裁剪，压缩是上传图片一定会遇到的问题。如何获得裁剪的图片呢获取裁剪后的图片信息首先我们可以获得裁剪框的节点然后调用图片质量图片质量越好图片大小越大这样就得到了你裁剪的图片了可以通过，放到你想要的节点里展示。

图片裁剪，压缩是上传图片一定会遇到的问题。这里把我测试cropper.js这款jquery插件的心得分享一下，可以给新手做参考。

引入插件相关文件,你们down到本地也可以。这是最基本的

</>复制代码

基本的html结构,初始化裁剪框

这里初始化是挂载到img节点上，然后可以外包一个盒子对他的大小来做限制

</>复制代码 
    
        
        左旋
        右旋

参数我就不说了，百度文档一大堆
这里的两个aspectRatio是裁剪框的宽高比例，autoCropArea是裁剪框占裁剪图片的比例

</>复制代码 
    $(".wait-crop").cropper({
        aspectRatio: 1 / 1,
        autoCropArea: .9
    });

到这里已经可以生成一个裁剪框了，不禁要问。如何获得裁剪的图片呢？

获取裁剪后的图片信息

首先我们可以获得裁剪框的canvas节点

</>复制代码 
var cropCanvas = $(".wait-crop").cropper("getCroppedCanvas")

然后调用canvas API toDataURL("img/jpeg",图片质量(0-1))//图片质量越好图片大小越大

</>复制代码 
var cropUrl = cropCanvas.toDataURL("image/jpeg", 0.4);

这样就得到了你裁剪的图片了可以通过attr(src)，放到你想要的img节点里展示。

附：如果后台不接收base64怎么办？

调用canvas方法 toBlob()获得一个blob对象，再通过以下代码转化为FormData

</>复制代码 
    $(".wait-crop").cropper("getCroppedCanvas").toBlob(function(blob) {
        var fd = new FormData();
        fd.append("file", blob, "i.jpeg"); 
    }）

附：左右旋转需裁剪的图片

</>复制代码 
    $(".rotate_l").click(function() {
        $(".wait-crop").cropper("rotate", -90);
    })
    $(".rotate_r").click(function() {
        $(".wait-crop").cropper("rotate", 90);
    })

你可能用到base64转blob对象

</>复制代码 
    function dataURItoBlob(base64Data) {
        var byteString;
        if (base64Data.split(",")[0].indexOf("base64") >= 0)
            byteString = atob(base64Data.split(",")[1]);
        else
            byteString = unescape(base64Data.split(",")[1]);
        var mimeString = base64Data.split(",")[0].split(":")[1].split(";")[0];
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ia], {
            type: mimeString
        });
    }

GPU云服务器云服务器 jQuery图片插件上传图片插件 php js上传图片压缩插件 jquery插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92424.html

无需Flash实现图片裁剪——HTML5中级进阶

摘要：需求就是那么简单，在浏览器里裁剪图片并上传到服务器。原图片对象上传裁剪后的对象初始化图片预览根据裁剪参数绘制转对象以下将对每个环节详解。或者根据获取裁剪信息包括旋转和缩放用进行手动绘制。前言图片裁剪上传，不仅是一个很贴合用户体验的功能，还能够统一特定图片尺寸，优化网站排版，一箭双雕。需求就是那么简单，在浏览器里裁剪图片并上传到服务器。我第一个想到的方法就是，将图片和裁剪参数（x...

JerryC 2019-08-19 18:17 评论0 收藏0
移动端cropper.js 裁剪图片并上传

摘要：参考效果引入使用结构头像头像截图弹窗取消截图头像保存引用具体使用可查看官网修改头像参加文件点击图片初始化关闭弹窗保存截图保存数据参考效果：http://www.17sucai.com/previe... 引入cropper使用 HTML结构头像 ...

since1986 2019-08-23 11:34 评论0 收藏0
移动端cropper.js 裁剪图片并上传

摘要：参考效果引入使用结构头像头像截图弹窗取消截图头像保存引用具体使用可查看官网修改头像参加文件点击图片初始化关闭弹窗保存截图保存数据参考效果：http://www.17sucai.com/previe... 引入cropper使用 HTML结构头像 ...

马龙驹 2019-08-02 11:23 评论0 收藏0
截取图片生成头像插件

摘要：获取图片地址之后，进行截取图片这里推荐一个插件点这里，具体怎么用就不再赘述。等截取图片之后，需要将截取的文件转换为二进制大文件。调取接口，将二进制大文件上传即可。上传头像插件目的：帮助开发者快速开发上传头像功能点背景：现在b，g能搜到的头像上传插件并不太好用，所以想提供一个比较自由度的上传并且可以剪切的插件。资源：具体资源请查看这里实现大致思路如下：先有一个上传的...

scq000 2019-08-01 17:43 评论0 收藏0