HTML5之图像处理

--- 内嵌图像

- drawImage可以绘制图像
context.drawImage(image,dx,dy)
context.drawImage(image,dx,dy,dw,dh)
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)

- 基本绘制 图片根据尺寸自动截取左上角

image.onload = function(){
　　context.drawImage(image,0,0)
}

- 自动调整 调整图片加载尺寸

image.onload = function(){
　　context.drawImage(image,0,0,600,400);
}

- 选择一部分区域贴到目标区域

image.onload = function(){
　　context.drawImage(image,0,0);
　　context.drawImage(image,620,300,300,375,390,10,200,250);
}

---- 绘制像素

- getImageData() // 获取一个Canvas的像素数组
- putImageData() // 将ImageData写入到Canvas中
- createImageData() // 创建一个ImageData

- ImageData对象

  context.filStyle = 'navy';
  context.fillRect(0,0,1,1);
  context.fillStyle = 'teal';
  context.fillRect(1,0,1,1);
  context.fillStyle = 'lime';
  context.fillRect(0,1,1,1); context.fillStyle = 'yellow'; context.fillRect(1,1,1,1); ImageData = context.getImageData(0,0,canvas.width,canvas.heigt);

- ImageData.width    // 图像宽度
- ImageData.heigth    // 图像高度
- ImageData.data    // 图像信息

for(var i=0; i<ImageData.data.length; i+= 4)
  {
    var r = ImageData.data[i];
    var g = ImageData.data[i+1];
    var b = ImageData.data[i+2];
    var a = ImageData.data[i+3];
    alert(r+" "+g+" "+b+" "+a); }

---- 修改像素

- 使用putImageData回写

for (var i=0; i<ImageData.data.length; i+=4)
{
    ImageData.data[i] = parseInt(Math.random()*255);
    ImageData.data[i+1] = parseInt(Math.random()*255);
    ImageData.data[i+2] = parseInt(Math.random()*255);
}

context.putImageData(ImageData,dx,dy,[dirtyX,dirtY,dirtyWidth,dirtyHeight])

---- 创建ImageData

var imagedata = context.createImageData(2,2);

for(var i=0; i<ImageData.data.length; i+=4){
    imagedata.data[i] = parseInt(Math.random()*255);
    imagedata.data[i+1] = parseInt(Math.random()*255);
    imagedata.data[i+2] = parseInt(Math.random()*255);
}

context.putImageData(imagedata,0,0);

---- 操作像素

var image = new Image();
image.src = 'images/yosemite.jpg';
image.onload =  function() {
    context.drawImage(image,0,0,360,240);
    var modified  = context.createImag eData(360,240);
    var imagedata = context.getImageData(0,0,360,240); for (var i=0; i<imagedata.data.length; i+=4) { var rgba = grayLuminosity( imagedata.data[i+0], imagedata.data[i+1], imagedata.data[i+2], imagedata.data[i+3] ); modified.data[i+0] = rgba[0]; modified.data[i+1] = rgba[1]; modified.data[i+2] = rgba[2]; modified.data[i+3] = rgba[3]; } context.putImageDa ta(modified,0,0); };

----- 滤镜效果代码

var grayLightness = function(r,g,b,a) {
var val =  parseInt(
    (Math.max(r,g,b)+Math.min(r,g,b))*0.5
);
    return [val,val,val,a];
};

var grayLuminosity =  function(r,g,b,a) {
var val = parseInt( (r*0.21)+(g*0.71)+(b*0.07) ); return [val,val,val,a]; }; var grayAverage = function(r,g,b,a) { var val = parseInt((r+g+b)/3.0 ); return [val,val,val,a]; }; var sepiaTone = function(r,g,b,a) { var rS = (r*0.393)+(g*0.769)+(b*0.189); var gS = (r*0.349)+(g*0.686)+(b*0.168); var bS = (r*0.272)+(g*0.534)+(b*0.131); return [ (rS>255) ? 255 : parseInt(rS), (gS>255) ? 255 : parseInt(gS), (bS>255) ? 255 : parseInt(bS),a]; }; var invertColor = function(r,g,b,a) { return [ (255‐r), (255‐g), (255‐b),a]; }; var swapChannels = function(r,g,b,a,order) { var rgba = [r,g,b,a]; return [ rgba[order[0]], rgba[order[1]], rgba[order[2]], rgba[order[3]]]; }; var monoColor = function(r,g,b,a,color) { return [ color[0], color[1], color[2], 255 ‐(parseInt((r+g+b)/3.0))]; };

----- 合成影像

- 当图形重叠时的绘制方法
context.globalCompositeOperation = 'source-over';

属性：
source-over/source-in/source-out/source-atop
destination-over/destination-in/destination-out/destination-atop
lighter/copy/xor

----- Patterns 复用模式

- createPattern()类似于drawImage()
context.createPattern(image,repetition)

- 复用模式

var cvs =  document.createElement("CANVAS");
cvs.width = 20;
cvs.height =  20;
var ctx =  cvs.getContext('2d');
ctx.fillStyle = 'lime';
ctx.fillRect(0,0,10,10); ctx.fillRect(10,10,10,10); ctx.fillStyle = 'green'; ctx.fillRect(10,0,10,10); ctx.fillRect(0,10,10,10); context.fillStyle = context.createPattern(cvs,'repeat'); context.fillRect(0,0,220,220);

 

转载于:https://www.cnblogs.com/xgao/p/4200959.html