HTML5之图像处理

前端开发发布日期：2025年07月05日浏览次数：202次

--- 内嵌图像

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

以上就是HTML5之图像处理的详细内容，更多关于HTML5之图像处理的资料请关注九品源码其它相关文章！

相关热词： HTML5 图像处理

上一篇：微信小程序 confirm（删除提示）
下一篇：HTML5 Canvas绘制图形从入门到精通

文章分类

IT资讯 CMS教程服务器数据库前端开发后端开发工具使用其他教程

开发前端软件素材源码教程下载网站

HTML5之图像处理

文章分类

最后更新

热门排行