利用Canvas对图片进行处理的方法

canvas，中文译为“画布”，html5中新增了元素，可以结合javascript动态地在画布中绘制图形。本文主要给和家介绍了关于利用canvas对图片进行处理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，希望能帮助到大家。

大概流程非常简单，主要分为以下三个步骤：

Canvas图片处理

是的，就像把大象装进冰箱一样简单，哈哈。

一、主要API

整个流程中所用到的主要Canvas API有：

• 绘制图像： drawImage()

• 获取图像数据： getImageData()

• 重写图像数据： putImageData()

• 导出图像： toDataURL()

1. drawImage()

顾名思义，该方法就是用于将图像绘制与Canvas画布当中，具体用法有三种：

      ① 在画布上定位图像：context.drawImage(img,x,y)

      ② 在画布上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height)

      ③ 剪切图像，并在画布上定位被剪切的部分：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

以上参数值描述如下表：

2. getImageData()

该方法用于从Canvas画布中获取图像数据，具体用法如下：

获取画布指定矩形范围内的像素数据：var ImageData = context.getImageData(x,y,width,height)

动易网上商城管理系统 2006 Sp6 Build 1120 普及版

将产品展示、购物管理、资金管理等功能相结合，并提供了简易的操作、丰富的功能和完善的权限管理，为用户提供了一个低成本、高效率的网上商城建设方案包含PowerEasy CMS普及版，主要功能模块：文章频道、下载频道、图片频道、留言频道、采集管理、商城模块、商城日常操作模块500个订单限制（超出限制后只能查看和删除，不能进行其他处理） 无订单处理权限分配功能（只有超级管理员才能处理订单）

下载

以上参数值描述如下表：

该方法会返回一个ImageData对象，该对象有三个属性分别为：width、height和data，而我们最主要用到的就是这个data数组，因为它保存着图像中每一个像素的数据。有了这些数据之后我们便可以对它们进行处理，最后再将其重写至Canvas画布中，这样就实现了对图片的处理转换。对于该data数组具体用法，我们可以在后面的实例中看到。

3. putImageData()

该方法很简单，就是用于将图像数据重写至Canvas画布中，具体用法如下：

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

以上参数值描述如下表：

4. toDataURL()

这个方法与以上三种方法不同，它是Canvas对象的方法，该方法返回的是一个包含data URI的字符串，该字符串可直接作为图片路径地址填入标签的src属性当中，具体用法如下：

var dataURL = canvas.toDataURL(type, encoderOptions);

以上参数值描述如下表：

二、图片处理实例

本实例将通过代码简单介绍如何把彩色图片处理成黑白图片。

//JavaScript
window.onload = function(){
  var canvas = document.getElementById("canvas"),  //获取Canvas画布对象
    context = canvas.getContext('2d'); //获取2D上下文对象，大多数Canvas API均为此对象方法
  var image = new Image(); //定义一个图片对象
  image.src = 'imgs/img.jpg'; 
  image.onload = function(){ //此处必须注意！后面所有操作均需在图片加载成功后执行，否则图片将处理无效
    context.drawImage(image,0,0); //将图片从Canvas画布的左上角(0,0)位置开始绘制，大小默认为图片实际大小
    var handle = document.getElementById("handle");
    var create = document.getElementById("create");
    handle.onclick = function(){ // 单击“处理图片”按钮，处理图片
      var imgData = context.getImageData(0,0,canvas.width,canvas.height);  //获取图片数据对象
      var data = imgData.data; //获取图片数据数组，该数组中每个像素用4个元素来保存，分别表示红、绿、蓝和透明度值
      var average = 0;
      for (var i = 0; i < data.length; i+=4) {
        average = Math.floor((data[i]+data[i+1]+data[i+2])/3); //将红、绿、蓝色值求平均值后得到灰度值
        data[i] = data[i+1] = data[i+2] = average; 将每个像素点的色值重写
      }
      imgData.data = data;
      context.putImageData(imgData,0,0); //将处理后的图像数据重写至Canvas画布，此时画布中图像变为黑白色
    };
    create.onclick = function(){ // 单击“生成图片”按钮，导出图片
      var imgSrc = canvas.toDataURL(); //获取图片的DataURL
      var newImg = new Image();
      var result = document.getElementById("result");
      newImg.src = imgSrc; //将图片路径赋值给src
      result.innerHTML = '';
      result.appendChild(newImg);
    };
  };
};

相关推荐：

Canvas对图片进行处理

PHP图片处理之多张图片合成一张的实例

canvas的图片处理