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

等边管理

头像日常都以长方形,首先咱们需要得到图片宽度和冲天的纤维值,用该最小值作为边长居中裁剪图片,最后收获四个圆柱形的图样:

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'));
    };
};

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对象(画笔State of Qatar  
  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, 50State of Qatar;   
  15. }   
  16. </script>  

咱俩再度利用浏览器访谈页面,将会看见如下展现效果(效果图片中的”CodePlayer”字样其实也是空心的,只是由于字体十分小引致两边看起来重叠在了协同State of Qatar:
图片 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的矩形部分State of Qatar绘制到canvas中以(canvasX,canvasY卡塔尔国为左上角坐标、宽度为canvasWidth、中度为canvasHeight的矩形区域中
科学,你未有看错。要在canvas中绘制图像,大家能够动用三个名称叫drawImage(卡塔尔国的艺术,可是该情势具备三种不一样的变体,每个方法变体允许抽出的参数不独有数量不等,连参数的含义也不尽相似。

在这里边,我们对上述多个变体分别比方表明。

率先,我们采取drawImage()的率先个变体在canvas上制图谷歌的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.     //钦命图片的UXC60L   
  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

是因为谷歌的Logo图像过大,超越了canvas的尺码范围,由此必须要彰显出图像的一片段。那时候,大家使用第一个变体将谷歌的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.     //钦赐图片的UENVISIONL   
  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等工具度量得出,这里平素动用衡量后的结果State of Qatar。

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.     //钦定图片的UCR-VL   
  12.     img.src = “”;
      
  13.     //浏览器加载图片达成后再绘制图片   
  14.     img.onload = function(){   
  15.         /*  
  16.          * 将图像左边的”Goo”部分(即以坐标(0,0卡塔尔为左上角坐标、宽度为332px、高度为190px的局地图像卡塔尔 
  17.          * 绘制到canvas中以坐标(10,10State of Qatar为左上角、宽度为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…

该方式解码出来大概是一批乱码,Uint8Array回到的是8进制整型数组。

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);
    });
};

上篇小说提到图片上传用到了FileReader,FormData,实际上首要用那四个大家着力能促成图片的预览和上传了。完毕图片压缩,大家需求正视canvas,是的,正是canvas!

前几日社区体系须求扶持移动端,当中涉嫌到顾客头像上传,头像有大中型Mini三种尺寸,在PC端,社区用Flash来管理头像编辑和转移,但该Flash控件的界面不友好何况移动端对Flash的支撑糟糕,思谋到这么些主题素材,最终大家选拔Canvas来成功图像尺寸缩放和图纸数据得到。

dWidth在对象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

终极经过ajax将Blob对象发送到server就能够。

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));

图片 7

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);
            }
            // 居中剪切
            // ... ...
            // 截屏操作
            // ... ...
    };
};

小结一下:

var image = new Image(),
canvas = document.createElement("canvas"),
ctx = canvas.getContext('2d');
$(".fileUpload").fileUpload({
                "url": "savetofile.php",
                "file": "myFile",
                "success":function(evt){
                    console.log(evt.target.responseText)
                }
});

测了下,依旧不行,因为准时查询这种办法对符合规律的server重返的图形有成效,这里图片地址是base64,貌似时间还越来越久了~哭。

上篇小说中涉嫌移动端上传图片,大家领略现在流量照旧挺贵的,手提式有线电话机的像素是越来越高,拍个照动不动便是好几M,伤不起。即使客商端能够轻巧完结图片压缩再上传,但是大家的选择还也许在浏览器里面张开,如何做呢,图片压缩。受在此以前PC上的费用合计影响,尼玛js哪有权力去操作文件,哪有资格减少图片啊,搞不了,你们客户端去整吧。只好说自个儿或许有些井蛙之见了。在HTML5的影响下,前端能干的业务越来越多了,开垦的效率逼格也更高了,H5万岁!前端的吸重力也在这里,过去不容许的并不意味未来、现在不或者,努力吧,骚年!

仰望大家能找到更好的不二秘籍,多多沟通!谢谢!

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

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);
 }

为了上传完整的图纸,这里dx,dy必得安装为0,dWidth和dHeight必得设置为本来图片的上升的幅度和惊人。那便是为啥我们要求等image对象下载完成后拿走其原始尺寸,那很主要!

上边还会有比较面生的议程atob,其功用是做解码,因为图片格式的base64.

sHeight亟待绘制到目的上下文中的,源图像的矩形接受框的冲天。

浏览器在本土取图片的时候是万般无奈间接像file.size相仿获得其长度宽度的,只可以通过FileReader得到剧情后赋值给新建的image对象,新建的image对象下载须求时间!怎么破?不正是获得本地图片的尺码吗,难道未有别的方法了?

先说说H5在此以前小编们怎么上传,平日是依赖插件、flash也许俨然多少个文件form表单,少操不菲心。

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

那边要求专心的是,canvas将图纸画到画布上的时候必要规定canvas的尺码,同一时候设定好drawImage的参数,具体如下:

自个儿去,获取本地4M轻重的图片尺寸花了3174ms!!,图片越大时间也越久~

js怎么减弱图片???潜意识里的确一伊始是感到完结持续,后来阅读资料,切磋了下,开采可行!搞起!

 补充源代码:

自打有了H5,老总再也不管不顾虑作者的付出了。

                      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);

Blob是积攒二进制文件的容器,标准的Blob对象是三个图纸大概声音文件,其默许是PNG格式。

2、压缩图片一方面是想减小客户上传等待的时间,其余也减弱客商为此就义的流量,从总体时间来看,因为获取图片尺寸引致多贰次下载供给耗费时间,其实压不减少时间隔开并非非常大。除非大神们找到适当的秘技能够直接获得图片的尺寸,麻烦也告诉本人一声,特别感激;

1、用HTML5来收缩图片上传是可行的,在活动端咱们决不相信任客商端还是插件,方今主流浏览器支持程度已经相当的高了。

1、创立一个图片和四个canvas

dy源图像的左上角在指标canvas上 Y 轴的地方。

调用形式:

成套工艺流程大致如上,不过~~~完毕以往测量试验跑来说:“你不是说图片压缩了吧,为何图片依然上传那么慢!”,哥拿起手提式无线电话机对妹纸演示了一晃,明明火速嘛,于是反道“是您手提式有线电话机不行或然互连网倒霉吧,你下载图片看领会变小了,比在此之前一定快,你看笔者秒传”。呵呵,说归说,照旧背后检查代码,在浏览器中打时间log,相比没压缩在此以前的,尼玛!!!居然才快了几百纳秒!!折腾了半天,在此以前的代码也重构了,玩作者呢。

此间用的重大办法是canvas.toDataU兰德酷路泽L

 

图片 8

dx源图像的左上角在目的canvas上 X 轴之处。

3、图片上传

大概思路是:

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

于是想到了前头切磋过的快速取得图片长度宽度的博文, ,demo地址:,定期去查询图片加载进程中的中度可能增长幅度,不用等全方位图片加载达成。

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

canvas.toDataURL(type, encoderOptions);

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

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);
};

细心的大神看了下边的代码估量能猜出标题在哪,对的,获得本地图片长度宽度尺寸的时候出了难点。

 

sWidth内需绘制到对象上下文中的,源图像的矩形选择框的宽窄。假若不表达,整个矩形从坐标的sx和sy以前,到图像的右下角甘休。

3、既然时间费用相当多,不过大家收缩了图片,收缩了图片的轻重,缩小了流量的费用,存款和储蓄空间以至后一次获取该图形的岁月,所以照旧值得的。

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

法定的注明是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格式,百分百的宽MTK过该办法还应该有异常的大概率使图片变大~~~~多此一举,所以我们得以在canvas.drawImage的时候适当设置sWidth和sHeight,譬就好像比例减弱1.5倍等,图片品质实际并不太影响查看,非常对尺寸相当的大的图纸来讲。

(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);

dHeight在目的canvas上绘制图像的惊人。 允许对绘制的图像进行缩放。
假如不表达, 在绘制时图片中度不会缩放。

发表评论

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