• <sub id="h4knl"><ol id="h4knl"></ol></sub>
    <sup id="h4knl"></sup>
      <sub id="h4knl"></sub>

      <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
      1. <strong id="h4knl"></strong>

      2. HTML5組件Canvas實(shí)現(xiàn)圖像灰度化教程

        時間:2024-10-20 16:35:48 HTML DOM 我要投稿
        • 相關(guān)推薦

        關(guān)于HTML5組件Canvas實(shí)現(xiàn)圖像灰度化教程

          新建一個html頁面,在body tag之間加入

          Gray Filter

          添加一段最簡單的JavaScript 腳本

          window.onload = function() {

          var canvas = document.getElementById("myCanvas");

          // TODO: do something here

          }

          從Canvas對象獲取繪制對象上下文Context的代碼如下:

          var context = canvas.getContext("2d");

          在html頁面中加入一幅圖像的html代碼如下

          完全源代碼如下:

          window.onload = function() {

          var canvas = document.getElementById("myCanvas");

          var image = document.getElementById("imageSource");

          // re-size the canvas deminsion

          canvas.width = image.width;

          canvas.height = image.height;

          // get 2D render object

          var context = canvas.getContext("2d");

          context.drawImage(image, 0, 0);

          var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);

          alert(canvasData.width.toString());

          alert(canvasData.height.toString());

          // gray filter

          for ( var x = 0; x < canvasData.width; x++) {

          for ( var y = 0; y < canvasData.height; y++) {

          // Index of the pixel in the array

          var idx = (x + y * canvasData.width) * 4;

          var r = canvasData.data[idx + 0];

          var g = canvasData.data[idx + 1];

          var b = canvasData.data[idx + 2];

          // calculate gray scale value

          var gray = .299 * r + .587 * g + .114 * b;

          // assign gray scale value

          canvasData.data[idx + 0] = gray; // Red channel

          canvasData.data[idx + 1] = gray; // Green channel

          canvasData.data[idx + 2] = gray; // Blue channel

          canvasData.data[idx + 3] = 255; // Alpha channel

          // add black border

          if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))

          {

          canvasData.data[idx + 0] = 0;

          canvasData.data[idx + 1] = 0;

          canvasData.data[idx + 2] = 0;

          }

          }

          }

          context.putImageData(canvasData, 0, 0); // at coords 0,0

          }

          Gray Filter

          代碼中的文件可以替換任意你想要看到的圖片文件

          HTML5, 原來如此神奇。程序在google瀏覽器中測試通過,

          最后的忠告,千萬不要在本地嘗試運(yùn)行上面的代碼,google瀏覽器的安全檢查會自動阻止從瀏覽器中讀寫非domain的文件

          最好在tomcat或者任意個web container的server上發(fā)布以后從google瀏覽器查看效果即可。

        【HTML5組件Canvas實(shí)現(xiàn)圖像灰度化教程】相關(guān)文章:

        Dreamweaver插入圖像的教程07-13

        實(shí)現(xiàn)html方法結(jié)構(gòu)化10-01

        旅游企業(yè)如何實(shí)現(xiàn)信息化07-01

        如何實(shí)現(xiàn)生產(chǎn)標(biāo)準(zhǔn)化管理10-22

        HTML5的發(fā)展08-15

        嵌入式系統(tǒng)的虛擬化怎么實(shí)現(xiàn)12-27

        實(shí)現(xiàn)企業(yè)管理標(biāo)準(zhǔn)化的措施01-13

        關(guān)于辦公自動化系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)07-28

        企業(yè)物流管理如何實(shí)現(xiàn)現(xiàn)代化11-02

        如何實(shí)現(xiàn)企業(yè)信息管理現(xiàn)代化12-08

        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码
      3. <sub id="h4knl"><ol id="h4knl"></ol></sub>
        <sup id="h4knl"></sup>
          <sub id="h4knl"></sub>

          <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
          1. <strong id="h4knl"></strong>

          2. 一道日本亚洲香蕉 | 伊人久久综在合线亚洲第一页 | 亚洲福利院在线看AV | 一本一道久久综合狠狠老 | 日本三级香港三级久久99 | 中文字幕人成乱码熟女免费69 |