zoukankan      html  css  js  c++  java
  • canvas --> getImageData()

    getImageData() 使用时有跨域问题

    设置img的属性 crossOrigin="anonymous"可解决crossOrigin的问题

    <img src="http://xxx.cn/xxxx.JPG" id="img1" crossOrigin="anonymous">

    首先将img画到canvas中

    var img=document.getElementById("img");

    ctx.drawImage(img,0,0);

     然后获取所有像素点数据

    var imgData=ctx.getImageData(0,0,c.width,c.height);

    /*
    imgData三个属性 data图片像素数据,height图片高度,width图片宽度
    
    imgData.data是一个Uint8ClampedArray数组

    Uint8ClampedArray是TypedArray 中的一种
    Int8Array; Uint8Array; Uint8ClampedArray; Int16Array; Uint16Array; Int32Array; Uint32Array; Float32Array; Float64Array;

    颜色值和透明度 4个一组
    rgba() 4个值都为0-255范围 data[0] red data[1] green data[2] blue data[3] Alpha
    */

    canvas 反色

    (计算所有像素 颜色值和255之差)

    for (var i=0;i<imgData.data.length;i+=4)
      {
      imgData.data[i]=255-imgData.data[i];
      imgData.data[i+1]=255-imgData.data[i+1];
      imgData.data[i+2]=255-imgData.data[i+2];
      imgData.data[i+3]=255;
      }
    ctx.putImageData(imgData,0,0);    
  • 相关阅读:
    Java-判断一个数是不是素数
    Sublime快捷键
    python
    全排列
    python
    python
    OpenCV 实现图像结构相似度算法 (SSIM 算法)
    C++
    C++
    NFA 转 DFA
  • 原文地址:https://www.cnblogs.com/king2016/p/6026256.html
Copyright © 2011-2022 走看看