奥门新浦京官方网站深入研究HTML5实现图片压缩上传

最近社区系统需要支持移动端,其中涉及到用户头像上传,头像有大中小三种尺寸,在PC端,社区用Flash来处理头像编辑和生成,但该Flash控件的界面不友好而且移动端对Flash的支持不好,考虑到这些问题,最后我们选用Canvas来完成图像尺寸缩放和图片数据获取。

HTML5 Canvas绘制文本及图片的基础教程,

绘制文本

在HTML5中,我们还可以在Canvas「画布」上绘制我们所需的文本文字,其中所涉及到的CanvasRenderingContext2D对象的主要属性和方法如下:

属性或方法 基本描述
font 设置绘制文字所使用的字体,例如20px 宋体,默认值为10px sans-serif。该属性的用法与css font属性一致,例如italic bold 14px/30px Arial,宋体
fillStyle 用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
strokeStyle 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
fillText(string text, int x, int y[, int maxWidth]) 从指定坐标点位置开始绘制填充的文本文字。参数maxWidth是可选的,如果文本内容宽度超过该参数设置,则会自动按比例缩小字体以适应宽度。与本方法对应的样式设置属性为fillStyle
strokeText(string text, int x, int y[, int maxWidth]) 从指定坐标点位置开始绘制非填充的文本文字(文字内部是空心的)。参数maxWidth是可选的,如果文本内容宽度超过该参数设置,则会自动按比例缩小字体以适应宽度。该方法与fillText()用法一致,不过strokeText()绘制的文字内部是非填充(空心)的,fillText()绘制的文字是内部填充(实心)的。与本方法对应的样式设置属性为strokeStyle

从上面的API描述信息中我们可以得知,在Canvas中可以使用两种方式来绘制文本文字:一种是使用fillText()+fillStyle来绘制填充(实心)的文字;一种是使用strokeText()+strokeStyle绘制非填充(空心)的文字。

下面,我们先来看看如何使用canvas绘制实心文字,具体html代码如下:

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta charset=”UTF-8″>   
  5. <title>HTML5 Canvas绘制文本文字入门示例</title>   
  6. </head>   
  7. <body>   
  8.   
  9. <!– 添加canvas标签,并加上红色边框以便于在页面上查看 –>   
  10. <canvas id=”myCanvas” width=”400px” height=”300px” style=”border: 1px solid red;”>   
  11. 您的浏览器不支持canvas标签。   
  12. </canvas>   
  13.   
  14. <script type=”text/javascript”>   
  15. //获取Canvas对象(画布)   
  16. var canvas = document.getElementById(“myCanvas”);   
  17. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
      
  18. if(canvas.getContext){     
  19.     //获取对应的CanvasRenderingContext2D对象(画笔)
      
  20.     var ctx = canvas.getContext(“2d”);   
  21.        
  22.     //设置字体样式   
  23.     ctx.font = “30px Courier New”;   
  24.     //设置字体填充颜色   
  25.     ctx.fillStyle = “blue”;   
  26.     //从坐标点(50,50)开始绘制文字   
  27.     ctx.fillText(“CodePlayer+中文测试”, 50, 50);   
  28. }   
  29. </script>   
  30. </body>   
  31. </html>  

对应的显示效果如下:
奥门新浦京官方网站 1

接着,我们使其他环境条件均保持不变,再次使用strokeText()+strokeStyle方式来绘制上述示例中的文字,对应的JavaScript代码如下:

JavaScript Code复制内容到剪贴板

  1. <script type=”text/javascript”>   
  2. //获取Canvas对象(画布)   
  3. var canvas = document.getElementById(“myCanvas”);   
  4. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
      
  5. if(canvas.getContext){     
  6.     //获取对应的CanvasRenderingContext2D对象(画笔)
      
  7.     var ctx = canvas.getContext(“2d”);   
  8.        
  9.     //设置字体样式   
  10.     ctx.font = “30px Courier New”;   
  11.     //设置字体颜色   
  12.     ctx.strokeStyle = “blue”;   
  13.     //从坐标点(50,50)开始绘制文字   
  14.     ctx.strokeText(“CodePlayer+中文测试”, 50, 50);   
  15. }   
  16. </script>  

我们再次使用浏览器访问页面,将会看到如下显示效果(效果图片中的”CodePlayer”字样其实也是空心的,只是由于字体较小导致两侧看起来重叠在了一起):
奥门新浦京官方网站 2

绘制图片 在html5中,除了利用canvas绘制矢量图形之外,我们还可以在canvas「画布」上绘制现有的图像文件。

首先,我们来看看使用canvas绘制图像文件需要用到CanvasRenderingContext2D对象的哪些主要属性和方法:

XML/HTML Code复制内容到剪贴板

  1. drawImage(mixed image, int x, int y)  

以canvas上指定的坐标点开始,按照图像的原始尺寸大小绘制整个图像。这里的image可以是Image对象,也可以是Canvas对象(下同)。

XML/HTML Code复制内容到剪贴板

  1. drawImage(mixed image, int x, int y, int width, int height)  

以canvas上指定的坐标点开始,以指定的大小(width和height)绘制整个图像,图像将根据指定的尺寸自动进行相应的缩放。
drawImage(mixed image, int imageX, int imageY, int imageWidth, int
imageHeight, int canvasX, int canvasY, int canvasWidth, int
canvasHeight)
将指定图像的局部图像(以(imageX,
imageY)为左上角、宽度为imageWidth、高度为imageHeight的矩形部分)绘制到canvas中以(canvasX,canvasY)为左上角坐标、宽度为canvasWidth、高度为canvasHeight的矩形区域中
是的,你没有看错。要在canvas中绘制图像,我们可以使用一个名为drawImage()的方法,不过该方法具有三种不同的变体,每个方法变体允许接收的参数不仅数量不同,连参数的含义也不尽相同。

在这里,我们对上述三个变体分别举例说明。

首先,我们使用drawImage()的第一个变体在canvas上绘制Google的logo图片(原始尺寸为550
x 190)。

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta charset=”UTF-8″>   
  5. <title>HTML5 Canvas绘制图像入门示例</title>   
  6. </head>   
  7. <body>   
  8.   
  9. <!– 添加canvas标签,并加上红色边框以便于在页面上查看 –>   
  10. <canvas id=”myCanvas” width=”400px” height=”300px” style=”border: 1px solid red;”>   
  11. 您的浏览器不支持canvas标签。   
  12. </canvas>   
  13.   
  14. <script type=”text/javascript”>   
  15. //获取Canvas对象(画布)   
  16. var canvas = document.getElementById(“myCanvas”);   
  17. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
      
  18. if(canvas.getContext){     
  19.     //获取对应的CanvasRenderingContext2D对象(画笔)
      
  20.     var ctx = canvas.getContext(“2d”);   
  21.        
  22.     //创建新的图片对象   
  23.     var img = new Image();   
  24.     //指定图片的URL   
  25.     img.src = “”;
      
  26.     //浏览器加载图片完毕后再绘制图片   
  27.     img.onload = function(){   
  28.         //以Canvas画布上的坐标(10,10)为起始点,绘制图像
      
  29.         ctx.drawImage(img, 10, 10);                
  30.     };   
  31. }   
  32. </script>   
  33. </body>   
  34. </html>  

对应的显示效果如下:
奥门新浦京官方网站 3

由于Google的Logo图像过大,超过了canvas的尺寸范围,因此只能显示出图像的一部分。此时,我们使用第2个变体将Google的logo图像缩小到指定的宽度和高度,并绘制到canvas中。

JavaScript Code复制内容到剪贴板

  1. <script type=”text/javascript”>   
  2. //获取Canvas对象(画布)   
  3. var canvas = document.getElementById(“myCanvas”);   
  4. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
      
  5. if(canvas.getContext){     
  6.     //获取对应的CanvasRenderingContext2D对象(画笔)
      
  7.     var ctx = canvas.getContext(“2d”);   
  8.        
  9.     //创建新的图片对象   
  10.     var img = new Image();   
  11.     //指定图片的URL   
  12.     img.src = “”;
      
  13.     //浏览器加载图片完毕后再绘制图片   
  14.     img.onload = function(){   
  15.         //以Canvas画布上的坐标(10,10)为起始点,绘制图像
      
  16.         //图像的宽度和高度分别缩放到350px和100px   
  17.         ctx.drawImage(img, 10, 10, 350, 100);                
  18.     };   
  19. }   
  20. </script>  

我们将Google的logo图像进行缩放后,此时就可以在canvas中看到整个图像了:
奥门新浦京官方网站 4

最后,我们使用第三个方法变体将Google
logo中的”Goo”部分图像绘制到canvas中(“Goo”部分的图像大小可以使用Photoshop等工具测量得出,这里直接使用测量后的结果)。

JavaScript Code复制内容到剪贴板

  1. <script type=”text/javascript”>   
  2. //获取Canvas对象(画布)   
  3. var canvas = document.getElementById(“myCanvas”);   
  4. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
      
  5. if(canvas.getContext){     
  6.     //获取对应的CanvasRenderingContext2D对象(画笔)
      
  7.     var ctx = canvas.getContext(“2d”);   
  8.        
  9.     //创建新的图片对象   
  10.     var img = new Image();   
  11.     //指定图片的URL   
  12.     img.src = “”;
      
  13.     //浏览器加载图片完毕后再绘制图片   
  14.     img.onload = function(){   
  15.         /*  
  16.          * 将图像左侧的”Goo”部分(即以坐标(0,0)为左上角坐标、宽度为332px、高度为190px的部分图像)
     
  17.          * 绘制到canvas中以坐标(10,10)为左上角、宽度为332px、高度为190px的矩形区域
     
  18.          *  
  19.          * canvas绘制图像的目标区域的宽度和高度与截取的部分图像尺寸保持一致,
     
  20.          * 就表示不进行缩放,以原始尺寸截取部分图像
     
  21.          */           
  22.         ctx.drawImage(img, 0, 0, 332, 190, 10, 10, 332, 190);             
      
  23.     };   
  24. }   
  25. </script>  

此时,我们就可以看到canvas中显示的”Goo”局部图像了:
奥门新浦京官方网站 5

Canvas绘制文本及图片的基础教程, 绘制文本
在HTML5中,我们还可以在Canvas「画布」上绘制我们所需的文本文字,其中所涉及到的Canva…

上篇文章中提到移动端上传图片,我们知道现在流量还是挺贵的,手机的像素是越来越高,拍个照动不动就是好几M,伤不起。虽然客户端可以轻轻松松实现图片压缩再上传,但是我们的应用还可能在浏览器里面打开,怎么办呢,图片压缩。受以前PC上的开发思维影响,尼玛js哪有权限去操作文件,哪有资格压缩图片啊,搞不了,你们客户端去整吧。只能说自己还是有些井底之蛙了。在HTML5的影响下,前端能干的事情越来越多了,开发的功能逼格也越来越高了,H5万岁!前端的魅力也在这,过去不可能的并不意味现在、以后不可能,努力吧,骚年!

等边处理

头像一般都是正方形,首先我们需要获取图片宽度和高度的最小值,用该最小值作为边长居中裁剪图片,最终得到一个正方形的图片:

var ImageEditor = function() {
    // 用离线canvas处理图片数据
    this.canvas = document.createElement('canvas');
    this.context = this.canvas.getContext('2d');
};
var fn = ImageEditor.prototype;
fn.resizeCanvas = function(width, height) {
    this.canvas.width = width;
    this.canvas.height = height;
};
fn.clipSquareImage = function(url, callback) {
    var that = this,
        img = new Image();
    img.src = url;
    img.onload = function() {
        // 取宽高最小值作为正方形边长
        var eLength = Math.min(img.width, img.height),
            picture = img;
        // canvas不支持局部截屏,截屏前必须先调节canvas的宽高
        that.resizeCanvas(eLength, eLength);
        // 将图片以居中裁剪的方式画到canvas中。
        // drawImage支持9个参数:图片对象,图片上的剪切坐标XY,
        // 剪切宽高,图片在canvas上的坐标XY及图片宽高
        that.context.drawImage(picture,
            (picture.width - eLength) / 2, (picture.height - eLength) / 2,
            eLength, eLength, 0, 0, eLength, eLength);
        // 截屏,即获取base64数据
        callback.call(that, that.canvas.toDataURL('image/png'));
    };
};

js怎么压缩图片???潜意识里确实一开始是觉得实现不了,后来翻阅资料,研究了下,发现可行!搞起!

Canvas元素大小限制问题

上述clipSquareImage函数中,由于canvas.toDataURL接口不提供宽高参数,只能够一次性把整个canvas的屏幕数据截取下来,所以在对Canvas截屏前,我们必须先设置Canvas元素的大小。然而移动端拍照的分辨率极高,宽高大多会在3000以上,当我们根据相片宽高的最小值来设置Canvas的尺寸时,Canvas元素的最小宽度也高达到3000以上。

问题在于,每个平台对Canvas的大小都有限制,如果Canvas的宽度或高度任意一个值超过了平台限制,Canvas将无法进行渲染,canvas.toDataURL只能获取一张透明的图片数据。

Maximum size of a canvas
element中提到了部分平台下Canvas的尺寸限制:

chrome          = 32767x32767
iPod Touch 16GB = 1448x1448
iPad Mini       = 2290x2289
iPhone 3        = 1448x1448
iPhone 5        = 2290x2289

参考以上数据,我们先给Canvas设置一个最大的宽度:

var MAX_WIDTH = 1000;

clipSquareImage函数中加入最大宽度的检测,如果超过限制,则创建一个临时的canvas进行图片缩放处理,最后对该临时的Canvas进行居中剪切:

fn.clipSquareImage = function(url, callback) {
    var that = this,
        img = new Image();
    img.src = url;
    img.onload = function() {
         // 取图片宽高和Canvas的最大宽度的最小值作为等边长
        var eLength = Math.min(img.width, img.height, MAX_WIDTH),
            // 剪切对象
            picture = img,
            tempEditor,
            ratio;
            // 如果图片尺寸超出限制
            if (eLength === MAX_WIDTH) {
                // 创建一个临时editor
                tempEditor = new ImageEditor();
                ratio = img.width / img.height;
                // 按图片比例缩放canvas
                img.width < img.height ?
                    tempEditor.resizeCanvas(MAX_WIDTH * ratio, MAX_WIDTH) :
                    tempEditor.resizeCanvas(MAX_WIDTH, MAX_WIDTH / ratio);
                tempEditor.context.drawImage(img, 0, 0, tempEditor.canvas.width, tempEditor.canvas.height);
                // 将临时Canvas作为剪切对象
                picture = tempEditor.canvas;
                eLength = Math.min(tempEditor.canvas.width, tempEditor.canvas.height);
            }
            // 居中剪切
            // ... ...
            // 截屏操作
            // ... ...
    };
};

先说说H5以前我们怎么上传,一般是借助插件、flash或者干脆一个文件form表单,少操不少心。

Canvas锯齿问题

上面我们已经能够通过Canvas裁剪出一张正方形的图片,接下来我们还需要处理头像图片大中小三种尺寸。在Canvas中,drawImage接口提供非常方便的缩放功能:

var editor = new ImageEditor;
// 将图片缩放到300x300
// drawImage支持5个参数:图片对象,及图片在canvas上的坐标和宽高
editor.context.drawImage(squareImage, 0, 0, 300, 300);

然而大尺寸图片直接用drawImage进行缩小处理会导致图片出现锯齿。在stack
overflow上HTML5 canvas drawImage: how to apply
antialiasing提出了一个方案:对图片进行若干次的等比例缩小,最后再放大到目标尺寸:

奥门新浦京官方网站 6

参考这个方案,我们可以实现antialiasScale抗锯齿缩放函数:

fn.antialisScale = function(img, width, height) {
    var offlineCanvas = document.createElement('canvas'),
        offlineCtx = offlineCanvas.getContext('2d'),
        sourceWidth = img.width,
        sourceHeight = img.height,
        // 缩小操作的次数
        steps = Math.ceil(Math.log(sourceWidth / width) / Math.log(2)) - 1,
        i;
    // 渲染图片
    offlineCanvas.width = sourceWidth;
    offlineCanvas.height = sourceHeight;
    offlineCtx.drawImage(img, 0, 0, offlineCanvas.width, offlineCanvas.height);
    // 缩小操作
    // 进行steps次的减半缩小
    for(i = 0; i < steps; i++) {
        offlineCtx.drawImage(offlineCanvas, 0, 0,
            offlineCanvas.width * 0.5, offlineCanvas.height * 0.5);
    }
    // 放大操作
    // 进行steps次的两倍放大
    this.context.drawImage(offlineCanvas, 0, 0,
        offlineCanvas.width * Math.pow(0.5, steps), 
        offlineCanvas.height * Math.pow(0.5, steps),
        0, 0, width, height);
};

我们可以用这个函数代替drawImage完成缩放工作,生成头像图片的三种尺寸:

fn.scaleSquareImage = function(url, sizes, callback) {
    var that = this;
    // 先裁剪一个正方形
    that.clipSquareImage(url, sizes, function(data) {
        var squareImage = new Image(),
            result = [],
            i;
        squareImage.src = data;
        // 抗锯齿缩放
        for (i = 0; i < sizes.length; i++) {
            that.antialisScale(squareImage, sizes[i], size[i]);
            result.push(that.canvas.toDataURL('image/png'));    
        }
        callback.call(that, result);
    });
};

自从有了H5,老板再也不担心我的开发了。

PHP存储base64图片数据

Canvas.toDataURL()获取的默认图像数据格式是:data:image/png;base64, +
base64数据:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC

当把Canvas截屏数据传给后台时,后台需要截断开头的字段data:image/png;base64,,获取后面那串真正的base64数据:

<?php
    $imgData = $_POST['imgData'];
    // 截取有用的部分
    list($type, $imgData) = explode(';', $imgData);
    list(, $imgData)      = explode(',', $imgData);
    // base64 编码中使用了加号,
    // 如果通过url传递base64数据,+号会转换成空格
    $imgData = str_replace(' ', '+', $imgData);
    // 存储文件
    $success = file_put_contents('PATH/XXX.png', base64_decode($imgData));

上篇文章提到图片上传用到了FileReader,FormData,实际上主要用这两个我们基本能实现图片的预览和上传了。实现图片压缩,我们需要借助canvas,是的,就是canvas!

参考

  • Save a Base64 Encoded Canvas image to a png file using
    PHP
  • Html5 canvas drawImage: how to apply
    antialiasing
  • Maximum size of a canvas
    element
  • How to save a PNG image server-side, from a base64 data
    string
  • How to send FormData objects with Ajax-requests in
    jQuery

大致思路是:

1、创建一个图片和一个canvas

var image = new Image(),
canvas = document.createElement("canvas"),
ctx = canvas.getContext('2d');

2、我们将input中选择的图片地址通过FileReader获取后赋给新建的图片对象,然后将图片对象丢到canvas画布上。

                      var file = obj.files[0];
                        var reader = new FileReader();//读取客户端上的文件
                        reader.onload = function() {
                            var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload,
                            image.src=url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片
                            ...
                        };
                        image.onload = function() {
                            var w = image.naturalWidth,
                                h = image.naturalHeight;
                            canvas.width = w;
                            canvas.height = h;
                            ctx.drawImage(image, 0, 0, w, h, 0, 0, w, h);
                            fileUpload();
                        };
                        reader.readAsDataURL(file);

这里需要注意的是,canvas将图片画到画布上的时候需要确定canvas的尺寸,同时设定好drawImage的参数,具体如下:

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

奥门新浦京官方网站 7

dx源图像的左上角在目标canvas上 X 轴的位置。

dy源图像的左上角在目标canvas上 Y 轴的位置。

dWidth在目标canvas上绘制图像的宽度。 允许对绘制的图像进行缩放。
如果不说明, 在绘制时图片宽度不会缩放。

dHeight在目标canvas上绘制图像的高度。 允许对绘制的图像进行缩放。
如果不说明, 在绘制时图片高度不会缩放。

sx需要绘制到目标上下文中的,源图像的矩形选择框的左上角 X 坐标。

sy需要绘制到目标上下文中的,源图像的矩形选择框的左上角 Y 坐标。

sWidth需要绘制到目标上下文中的,源图像的矩形选择框的宽度。如果不说明,整个矩形从坐标的sx和sy开始,到图像的右下角结束。

sHeight需要绘制到目标上下文中的,源图像的矩形选择框的高度。

为了上传完整的图片,这里dx,dy必须设置为0,dWidth和dHeight必须设置为原始图片的宽度和高度。这就是为什么我们需要等image对象下载完毕后获取其原始尺寸,这很关键!

3、图片上传

function fileUpload() {
     var data = canvas.toDataURL("image/jpeg", quality);
     //dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字,我们只需要逗号之后的就行了
    data = data.split(',')[1];
    data = window.atob(data);
    var ia = new Uint8Array(data.length);
    for (var i = 0; i < data.length; i++) {
          ia[i] = data.charCodeAt(i);
    };
     //canvas.toDataURL 返回的默认格式就是 image/png
    var blob = new Blob([ia], {
     type: "image/jpeg"
    });
    var fd = new FormData();
        fd.append('myFile', blob);
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", opts.success, false);
    xhr.addEventListener("error", opts.error, false);
    xhr.open("POST", opts.url);
    xhr.send(fd);
 }

这里用的关键方法是canvas.toDataURL

canvas.toDataURL(type, encoderOptions);

官方的说明是The HTMLCanvasElement.toDataURL() method returns
a data
URI containing
a representation of the image in the format specified by
the type parameter (defaults
to PNG). The
returned image is in a resolution of 96
dpi.实际上就是读取canvas画布上图片的数据。其默认是png格式,如果第一个参数type是image/jpeg的话,第二个参数encoderOptions就可以用来设置图片的压缩质量,经过测试,如果是png格式,100%的宽高经过该方法还有可能使图片变大~~~~适得其反,所以我们可以在canvas.drawImage的时候适当设置sWidth和sHeight,比如同比例缩小1.5倍等,图片质量其实并不太影响查看,尤其对尺寸比较大的图片来说。

上面还有比较陌生的方法atob,其作用是做解码,因为图片格式的base64.

var encodedData = window.btoa("Hello, world"); // encode a string
var decodedData = window.atob(encodedData); // decode the string

该方法解码出来可能是一堆乱码,Uint8Array返回的是8进制整型数组。

Blob是存储二进制文件的容器,典型的Blob对象是一个图片或者声音文件,其默认是PNG格式。

 var blob = new Blob([ia], {
     type: "image/jpeg"
    });

最后通过ajax将Blob对象发送到server即可。

整个流程大致如上,但是~~~实现以后测试跑来说:“你不是说图片压缩了吗,为什么图片还是上传那么慢!”,哥拿起手机对妹纸演示了一下,明明很快嘛,于是反道“是你手机不行或者网络不好吧,你下载图片看明明变小了,比之前肯定快,你看我秒传”。呵呵,说归说,还是偷偷检查代码,在浏览器中打时间log,对比没压缩之前的,尼玛!!!居然才快了几百毫秒!!折腾了半天,之前的代码也重构了,玩我呢。

细心的大神看了上面的代码估计能猜出问题在哪,没错,获取本地图片长宽尺寸的时候出了问题。

奥门新浦京官方网站 8

我去,获取本地4M大小的图片尺寸花了3174ms!!,图片越大时间也越久~

image.onload = function() {
        var w = image.naturalWidth,
          h = image.naturalHeight;
        canvas.width = w / 1.5;
        canvas.height = h / 1.5;
        ctx.drawImage(image, 0, 0, w, h, 0, 0, w / 1.5, h / 1.5);
        Upload.fileUpload(type);
};

浏览器在本地取图片的时候是没法直接像file.size一样获取其长宽的,只能通过FileReader拿到内容后赋值给新建的image对象,新建的image对象下载需要时间!怎么破?不就是获取本地图片的尺寸吗,难道没有别的办法了?

于是想到了之前研究过的快速获取图片长宽的博文, ,demo地址:,定时去查询图片加载过程中的高度或者宽度,不用等整个图片加载完毕。

测了下,还是不行,因为定时查询这种方法对常规的server返回的图片有作用,这里图片地址是base64,貌似时间还更久了~哭。

 

小结一下:

1、用HTML5来压缩图片上传是可行的,在移动端我们不用依赖客户端或者插件,目前主流浏览器支持程度已经很高了。

2、压缩图片一方面是想减少用户上传等待的时间,另外也减少用户为此牺牲的流量,从整体时间来看,因为获取图片尺寸导致多一次下载需要耗时,其实压不压缩时间差别并不是特别大。除非大神们找到合适的方法能够直接获取图片的尺寸,麻烦也告知我一声,万分感谢;

3、既然时间成本差不多,但是我们压缩了图片,减少了图片的大小,减少了流量的消耗,存储空间以及下次获取该图片的时间,所以还是值得的。

 补充源代码:

(function($) {
    $.extend($.fn, {
        fileUpload: function(opts) {
            this.each(function() {
                var $self = $(this);
                var quality = opts.quality ? opts.quality / 100 : 0.2;
                var dom = {
                    "fileToUpload": $self.find(".fileToUpload"),
                    "thumb": $self.find(".thumb"),
                    "progress": $self.find(".upload-progress")
                };
                var image = new Image(),
                    canvas = document.createElement("canvas"),
                    ctx = canvas.getContext('2d');
                var funs = {
                    setImageUrl: function(url) {
                        image.src = url;
                    },
                    bindEvent: function() {
                        console.log(dom.fileToUpload)
                        dom.fileToUpload.on("change", function() {
                            funs.fileSelect(this);
                        });
                    },
                    fileSelect: function(obj) {
                        var file = obj.files[0];
                        var reader = new FileReader();
                        reader.onload = function() {
                            var url = reader.result;
                            funs.setImageUrl(url);
                            dom.thumb.html(image);
                        };
                        image.onload = function() {
                            var w = image.naturalWidth,
                                h = image.naturalHeight;
                            canvas.width = w;
                            canvas.height = h;
                            ctx.drawImage(image, 0, 0, w, h, 0, 0, w, h);
                            funs.fileUpload();
                        };
                        reader.readAsDataURL(file);
                    },
                    fileUpload: function() {
                        var data = canvas.toDataURL("image/jpeg", quality);
                        //dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字,我们只需要逗号之后的就行了
                        data = data.split(',')[1];
                        data = window.atob(data);
                        var ia = new Uint8Array(data.length);
                        for (var i = 0; i < data.length; i++) {
                            ia[i] = data.charCodeAt(i);
                        };
                        //canvas.toDataURL 返回的默认格式就是 image/png
                        var blob = new Blob([ia], {
                            type: "image/jpeg"
                        });
                        var fd = new FormData();
                        fd.append('myFile', blob);
                        var xhr = new XMLHttpRequest();
                        xhr.addEventListener("load", opts.success, false);
                        xhr.addEventListener("error", opts.error, false);
                        xhr.open("POST", opts.url);
                        xhr.send(fd);
                    }
                };
                funs.bindEvent();
            });
        }
    });
})(Zepto);

调用方式:

$(".fileUpload").fileUpload({
                "url": "savetofile.php",
                "file": "myFile",
                "success":function(evt){
                    console.log(evt.target.responseText)
                }
});

 

希望大家能找到更好的办法,多多交流!感谢!

发表评论

电子邮件地址不会被公开。 必填项已用*标注