Picdiet.js:下一代js图片上传组件

节约服务器80%的带宽及硬盘容量,加快网站加载速度,降低服务器处理图片的负荷

Picdiet.js特性

HTML5+js编写

采用HTML5+js编写,让图片的处理在本地运行

在过去的web图片处理方式中,一般都是用户上传图片后,经由服务器调用ImageMagick或者GD库等等集中进行处理,比如压缩体积、缩放、裁剪等等,这样无疑增大了服务器的CPU及内存开销。 而HTML5的许多特性都完美支持了图片的各种处理,picdiet.js采用HTML5+js编写,让图片在上传前就已经在用户浏览器中进行了压缩、裁剪或者缩放等等,极大减轻了服务器负担

节约带宽和硬盘,加快图片加载速度

强悍的压缩算法节约带宽和硬盘,加快网站图片加载速度,提升SEO效果

Picdiet强悍的图片压缩算法能在图片上传前压缩大部分体积,而肉眼几乎察觉不到压缩前后的视觉差异,经实际测试picdiet.js能平均压缩80%的图片体积,这一成绩也远好于市面上常见的压缩软件如jpegmini和tinypng等等。 同时,picdiet.js也支持上传前缩放、裁剪图片的尺寸大小,从而保证图片在上传前已经达到合适的体积和尺寸,优化了图片的传输和下载速度,节约了手机用户流量,提升了SEO的效果

缩放不失真

独特的图片缩放算法,保证图片在缩放时清晰不失真

前端缩放、裁剪图片时不可避免会用到canvas,canvas缩放图片的默认算法不是导致图片模糊就是图片锐化严重,造成图片严重失真,picdiet.js独创的图片缩放滤镜能够在图片在缩放时能够保持其原样清晰不失真 从而在图片上传前能够保持最合适的文件大小、图片尺寸以及图片画质

方便部署

无需第三方库,傻瓜式的部署方式,简单到不是前端开发者也能集成

Picdiet.js创作初衷即是让所有的网站都能集成这一简单的插件,如下代码:<button class="picdiet" data-accept=".jpg, .jpeg,.png,.gif" data-multiple="1" data-quality="75" data-maxwidth="800" data-callback="uploadimage">上传图片</button> 则表示支持图片格式“jpg、jpeg、png、gif”,支持多图片上传,压缩品质为75%,图片宽度超过800px将缩放,在缩放、压缩完成后再调用uploadimage函数

图片智能裁剪

智能识别主体裁剪图片,让机器智能裁剪图片到指定尺寸

在web开发中,很多时候需要将用户上传图片裁剪为指定尺寸,如头像上传后裁剪成100x100像素,个人主页的页头背景裁剪成970x90像素等等,有了picdiet.js,无需单独开发此上传组件, picdiet.js能智能识别一张图片最具视觉吸引力的主体部分,并缩放、裁剪至指定尺寸再压缩体积上传,这一切,您只需要引入一句:data-fixedsize="100x100" data-smartcrop="1"即可,非常简单

支持PC端及移动端

支持PC端及移动端,对HTML5支持的浏览器可适用picdiet.js

picdiet.js支持移动端(需最新版系统支持)及PC端,对移动端的良好支持也意味着为用户能节约宝贵流量。对最新HTML5支持的浏览器都可以使用picdiet.js,如非IE的浏览器:Edge浏览器、Chrome以及Firefox浏览器等等,picdiet.js支持jpeg、jpg以及png的压缩及缩放,对其它格式则跳过处理。 picdiet.js在gzipped之后仅195KB,相当于仅仅在您的网页上多增加了一张图片的大小。

Picdiet.js开发文档

Picdiet.js的部署非常简单,只需引用picdiet.js,对要上传的按钮绑定class="picdiet",再设置该按钮的上传属性即可,如下所示:

                
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <title>picdiet.js simple demo</title>
        </head>
        <body>
            <button class="picdiet" data-accept=".jpg, .jpeg,.png,.gif" data-multiple="1" data-quality="75" data-maxwidth="1200" data-callback="uploadimage">上传图片</button>
        </body>
        <script src="picdiet.js"></script>
    </html>
                
            

上述示例中,我们需要对上传的按钮绑定class="picdiet",同时,支持打开的图片格式有“.jpg, .jpeg,.png,.gif”(虽然picdiet.js支持打开此类型图片,但只对jpg、jpeg和png进行压缩、缩放和裁剪,其它格式则跳过处理),支持多文件上传,图片压缩品质为75%,当图片宽度超过1200px时,则先缩放图片再压缩,压缩完成后,执行uploadimage函数, 此时的uploadimage函数可执行比如ajax上传等等,具体到每个绑定的DOM支持哪些属性呢?如下表所示:

属性名称 释义 是否必须 默认值 使用示例
data-accept 支持所打开的文件扩展名 .jpg, .jpeg,.png,.gif data-accept=".jpg, .jpeg,.png,.gif"
data-multiple 是否支持多文件选中上传,“1”代表是 0 data-multiple="1"
data-quality 压缩图片品质,数值:1-100 75 data-quality="70"
data-maxwidth 图片宽度超过该值时先缩放再压缩 data-maxwidth="800"
data-maxheight 图片高度超过该值时先缩放再压缩 data-maxheight="600"
data-fixedsize 图片先缩放、裁剪至此尺寸再压缩 data-fixedsize="100x100"
data-smartcrop 是否启用智能裁剪,不启用则从图片中心缩放、裁剪 1 data-smartcrop="1"
data-callback 当图片缩放、压缩完毕后执行的函数名称 data-callback="uploadimage"

对于回调可自定义函数data-callback,该函数默认传入3个值:上传按钮的DOM对象,图片被压缩后生成的blob值,以及从新增的文件上传标签获得的文件属性,对于data-callback="uploadimage",我们自定义函数uploadimage执行图片ajax上传:

                
    /*
    * 当图片的缩放、裁剪、压缩完成后,系统将调用此函数,并传入以下3个值
    * @param dom 绑定的上传按钮对象
    * @param blob 图片压缩处理完成后生成的blob对象
    * @param file 从文件上传的标签获得的file原始对象
    */
    function uploadimage(dom,blob,file) {
        dom.innerHTML='正在上传图片...';
        //开始执行ajax上传操作,以下是最简单的xhr2上传实例,可自行添加各种事件处理方式,如:progress、error、loadstart、loadEnd等等事件
        var xhr = new XMLHttpRequest();
        var formData = new FormData();
        formData.append('file', blob);
        formData.append('filename', file.name);
        xhr.open('POST', './upload.php', true);
        xhr.onload = function(event) {
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                alert(xhr.response)
            }
        }
        xhr.send(formData);
    }
                
            

对于服务端,还是需秉持“永远不要相信用户的任何输入”为原则,以php为例,实现一个最简单的保存上传的图片的实例:

                
    <?php
    $extension=pathinfo($_POST['filename'],PATHINFO_EXTENSION);
    if(in_array($extension,array('jpg','jpeg','png','gif','bmp')))
    {
        $image_content = file_get_contents($_FILES['file']['tmp_name']);
        $store_name=uniqid().'.'.$extension;
        file_put_contents($store_name,$image_content);
        $size=getimagesize($store_name);
        if($size[0]>0 && $size[1]>0 && $size[0]<=1200) //二次校验宽度是否在预设值1200px范围内
        {
            echo '存储的文件名为:'.$store_name;
        }else{
            unlink($store_name);
        }
    }
    ?>
                
            

当然,如果想仅仅使用picdiet.js压缩图片,不想让任何HTML参与,在js中直接使用compress函数也可以:

                
    /*
     * 调用此函数可直接压缩jpg、png图片
     * @param arrayBuffer 图片的二进制字节流
     * @param ext 图片的扩展名
     * @param quality 图片的压缩品质
     * @returns 压缩后的blob文件对象
     */
    compress(arrayBuffer, ext, quality);
                
            
Picdiet.js使用协议及条款

Picdiet.js的官方网站为 https://www.picdiet.com,是Picdiet.js产品的开发商,依法独立拥有 Picdiet.js 产品著作权。 Picdiet.js 著作权受到法律和国际公约保护。使用者:无论个人或组织、盈利与否、用途如何(包括以学习和研究为目的),均需仔细阅读本协议,在理解、同意、并遵守本协议的全部条款后,方可开始使用 Picdiet.js。 本授权协议适用于 Picdiet.js的所有版本,https://www.picdiet.com拥有对本授权协议的最终解释权。

协议许可的权利

您可以在协议规定的约束和限制范围内修改 Picdiet.js源代码(如果被提供的话)或界面风格以适应您的网站要求。 获得商业授权之后,您可以将本软件应用于商业用途

协议规定的约束和限制

未获商业授权之前,不得将本软件用于商业用途(包括但不限于政府、企业网站、经营性网站、以营利为目或实现盈利的网站)。 不得对本软件或与之关联的商业授权进行任何形式的出租、出售、抵押或发放子许可证。 禁止在 Picdiet.js 的整体或任何部分基础上以发展任何派生版本、修改版本或第三方版本用于重新分发。 禁止将Picdiet.js用于https://www.picdiet.com竞争的网站上,如在线图片压缩工具网站等 如果您未能遵守本协议的条款,您的授权将被终止,所被许可的权利将被收回,并承担相应法律责任。

有限担保和免责声明

本软件及所附带的文件是作为不提供任何明确的或隐含的赔偿或担保的形式提供的。 用户出于自愿而使用本软件,您必须了解使用本软件的风险,包括但不限于: 1. 因Picdiet.js对各种设备(手机、平板、电脑等)的支持程度有限而导致出现的数据错误 2. 因Picdiet.js的技术缺陷导致出现的数据错误 3. 因用户错误的部署Picdiet.js导致出现的数据错误 等等 我们不承诺提供任何形式的技术支持、使用担保,也不承担任何因使用本软件而产生问题的相关责任。 有关 Picdiet.js 最终用户授权协议、商业授权与技术服务的详细内容,均由 Picdiet官方网站独家提供。Picdiet官方拥有在不事先通知的情况下,修改授权协议和服务价目表的权力,修改后的协议或价目表对自改变之日起的新授权用户生效。 电子文本形式的授权协议如同双方书面签署的协议一样,具有完全的和等同的法律效力。您一旦开始安装 Picdiet.js,即被视为完全理解并接受本协议的各项条款,在享有上述条款授予的权力的同时,受到相关的约束和限制。协议许可范围以外的行为,将直接违反本授权协议并构成侵权,我们有权随时终止授权,责令停止损害,并保留追究相关责任的权力。

仅需微信支付¥99元,您可以:
  • 获取Picdiet.js插件及永久商业使用授权
  • 大幅节省您的带宽和硬盘容量,减轻服务器CPU和内存负担
  • 加速您的网站加载速度,提升SEO效果