• Canvas createImageData


    createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。

    对于 ImageData 对象中的每个像素,都存在着四方面的信息,即 RGBA 值:

    • R - 红色 (0-255)
    • G - 绿色 (0-255)
    • B - 蓝色 (0-255)
    • A - alpha 通道 (0-255; 0 是透明的,255 是完全可见的)

    因此 ,transparent black 表示 (0,0,0,0)。

    color/alpha 以数组形式存在,并且既然数组包含了每个像素的四条信息,数组的大小是 ImageData 对象的四倍。(获得数组大小有更简单的办法,就是使用 ImageDataObject.data.length)

    ImageDataObject.data.length = ImageDataObject.width*ImageDataObject.height*4;

    包含 color/alpha 信息的数组存储于 ImageData 对象的 data 属性中。

    提示:在操作完成数组中的 color/alpha 信息之后,您可以使用 putImageData() 方法将图像数据拷贝回画布上。

     

    有两个版本的 createImageData() 方法:

    1. 以指定的尺寸(以像素计)创建新的 ImageData 对象:

    var imgData=context.createImageData(width,height);

    2. 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象(不会复制图像数据):

    var imgData=context.createImageData(imageData);

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>createImageData</title>
    </head>
    
    <body>
        <canvas id='myCanvas' width='800' height='400'>
            your browser does not support canvas
        </canvas>
        <script type="text/javascript">
        var c = document.getElementById('myCanvas');
        var ctx = c.getContext('2d');
        var img = new Image();
        img.src = 'face.jpg';
        img.onload = function() {
            // 从10,10坐标开始绘制整个图片
            ctx.drawImage(img, 10, 10);
            var imgData = ctx.getImageData(50, 50, 200, 200);
            var imgData01 = ctx.createImageData(imgData);
            for (var i = 0; i < imgData01.width * imgData01.height * 4; i += 4) {
                imgData01.data[i + 0] = 255;
                imgData01.data[i + 1] = 0;
                imgData01.data[i + 2] = 0;
                imgData01.data[i + 3] = 255;
            }
            ctx.putImageData(imgData01, 10, 260);
            var imgData02 = ctx.createImageData(100, 100);
            for (i = 0; i < imgData02.width * imgData02.height * 4; i += 4) {
                imgData02.data[i + 0] = 255;
                imgData02.data[i + 1] = 0;
                imgData02.data[i + 2] = 0;
                imgData02.data[i + 3] = 155;
            }
            ctx.putImageData(imgData02, 220, 260);
    
        };
        </script>
    </body>
    
    </html>
  • 相关阅读:
    odoo开发笔记 -- 异常、错误、警告、提示、确认信息显示
    odoo开发笔记--前端搜索视图--按照时间条件筛选
    odoo开发笔记-自定义发送邮件模板
    html表格导出Excel的一点经验心得
    throw和throw ex的区别
    js中对String去空格
    根据不同的多语言环境来切换不同的页面样式的具体示例
    HTML中 :after和:before的作用及使用方法(转)
    CSS清除浮动方法集合
    页面的Tab选项卡 简单实例
  • 原文地址:https://www.cnblogs.com/stono/p/4670258.html
Copyright © 2020-2023  润新知