基于js canvas的图片像素识别系统

最新推荐文章于 2023-01-17 11:49:51 发布
最新推荐文章于 2023-01-17 11:49:51 发布
阅读量432 收藏 1
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43200400/article/details/114019783
版权

基于js canvas的图片像素识别系统

<!DOCTYPE HTML PUBLIC> 
<html> 
 <head> 
 <meta charset="utf-8"> 
 <title>获取图片像素颜色,转换为css3 box-shadow</title> 
  
 <style type="text/css"> 
  body{margin: 0px; background:#f2f2f0;} 
  p{margin:0px;} 
  .title{color:#FFFF00; background:#000000; text-align:center; font-size:24px; line-height:50px; font-weight:bold;} 
  .file{position:absolute; width:100%; font-size:90px;} 
  .filebtn{display:block; position:relative; height:110px; color:#FFFFFF; background:#06980e; font-size:48px; line-height:110px; text-align:center; cursor:pointer; border: 3px solid #cccccc;} 
  .filebtn:hover{background:#04bc0d;} 
  .showimg{margin:10px auto 10px auto; -webkit-transition: all .3s; transition: all .3s;} 
  .showimg span{width:1px; height:1px; display:block; margin: -1px 0px 0px -1px;} 
  .css_code{margin:10px; padding:10px; display:none; border:1px solid #FFCC00; font-size:12px; background:#F1F1F1; white-space:pre-wrap; word-wrap:break-word; height:300px; overflow:auto;} 
  .css_code:hover{ 
    background:#DEFEDE; 
  } 
 </style> 
  
 <script type="text/javascript"> 
 window.onload = function(){ 
  
  var canvas = document.createElement('canvas'); 
  var context = canvas.getContext('2d'); 
  var showimg = document.getElementById('showimg'); 
  var shadow = showimg.getElementsByTagName('span')[0]; 
  var css_code = document.getElementById('css_code'); 
  var jieguo = document.getElementById('jieguo'); 
  
  document.getElementById('img').onchange = function(){ 
    var img = event.target.files[0]; 
 
    // 检查能否读取图片 
    if(!img){ 
      return ; 
    } 
 
    // 检查图片类型 
    if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name)) ){ 
      alert('图片只能是jpg,gif,png'); 
      return ; 
    } 
 
    // 检查图片尺寸 
    if(img.size > 120*1024){ 
      alert('图片不能大于120K'); 
      return ; 
    } 
 
    // file reader 
    var reader = new FileReader(); 
    reader.readAsDataURL(img); 
 
    reader.onload = function(e){ // reader onload start 
 
      var image = new Image(); 
      image.src = e.target.result; 
 
      image.onload = function(){ // image onload start 
 
        var img_width = this.width; 
        var img_height = this.height; 
 
        // 设置画布尺寸 
        canvas.width = img_width; 
        canvas.height = img_height; 
 
        // 将图片按像素写入画布 
        context.drawImage(this, 0, 0, img_width, img_height); 
 
        // 读取图片像素信息 
        var imageData = context.getImageData(0, 0, img_width, img_height); 
        console.log(imageData.data);
        var arrbox = [],
        
          length = imageData.data.length; 
 var  newArr = [];
        // 生成box-shadow 
        for(var i=0; i<length; i++){ 
 
          if(i%4 === 0){ // 每四个元素为一个像素数据 r,g,b,alpha 
 
            var x = i/4%img_width + 1;                // 横坐标 
            var y = Math.floor(i/4/img_width) + 1;          // 纵坐标 
            var alpha = Math.round(imageData.data[i+3]/255*100)/100; // alpha 值 
 
            if(imageData.data[i+3]==255){ // 没有alpha 值 
              var hex = gethex(imageData.data[i], imageData.data[i+1], imageData.data[i+2]); 
              arrbox.push(x + 'px ' + y + 'px #' + hex); 
              newArr.push('#' +hex)
            }else if(alpha>0){ // 有alpha 值 
              var rgba = imageData.data[i] + ',' + imageData.data[i+1] + ',' + imageData.data[i+2] + ',' + alpha; 
              arrbox.push(x + 'px ' + y + 'px rgba(' + rgba + ')'); 
              newArr.push('rgba(' + rgba + ')')
            } 
          } 
        } 
 console.log(arrbox);
 console.log(newArr);

        let arr1=[];
        let arr2=[];
        for (let i = 0; i < newArr.length; i++) {
          let index = arr1.indexOf(newArr[i]);
          if (index!=-1) {
            arr2[index] += 1;
          } else {
            arr1.push(newArr[i]);
            arr2.push(1);
          }
        }
        console.log(arr1);
        console.log(arr2);
        let hebing = [];
        for (let j = 0; j < arr1.length; j++) {
          let obj = {color:arr1[j],count:arr2[j]};
          hebing.push(obj)
        }
        console.log(hebing);


        // 编写方法，实现冒泡
        let arrarr = hebing;
    //外层循环，控制趟数，每一次找到一个最大值
    for (let i = 0; i < arrarr.length - 1; i++) {
        // 内层循环,控制比较的次数，并且判断两个数的大小
        for (var j = 0; j < arrarr.length - 1 - i; j++) {
            // 白话解释：如果前面的数大，放到后面(当然是从小到大的冒泡排序)
            if (arrarr[j].count < arrarr[j + 1].count) {
              let temp = arrarr[j];
                arrarr[j] = arrarr[j + 1];
                arrarr[j + 1] = temp;
            }
        }
    }
    console.log(arrarr);//[2, 4, 5, 12, 31, 32, 45, 52, 78, 89]
let baiCount='';
  for (let i = 0; i < arrarr.length - 1; i++) {
    if (arrarr[i].color === '#ffffff') {
      baiCount = arrarr[i].count;
      break
    }
      }
    console.log(baiCount/newArr.length);
    jieguo.innerHTML = '白色像素共'+baiCount +',像素总数为'+newArr.length+',白色所占比例'+baiCount/newArr.length
        // 将数据写入dom 
        showimg.style.width = img_width + 'px'; 
        showimg.style.height = img_height + 'px'; 
 
        shadow.style.boxShadow = arrbox.join(','); 
 
        // 输出CSS3 box-shadow 
        // css_code.style.display = 'block'; 
        // css_code.innerHTML = 'box-shadow: ' + arrbox.join(','); 
 
         
        // 获取16进制颜色 
        function gethex(r,g,b){ 
          r = r.toString(16); 
          g = g.toString(16); 
          b = b.toString(16); 
 
          // 补0 
          r.length==1? r = '0' + r : ''; 
          g.length==1? g = '0' + g : ''; 
          b.length==1? b = '0' + b : ''; 
 
          var hex = r + g + b; 
 
          // 简化处理,如 FFEEDD 可以写为 FED 
          if(r.slice(0,1)==r.slice(1,1) && g.slice(0,1)==g.slice(1,1) && b.slice(0,1)==b.slice(1,1)){ 
            hex = r.slice(0,1) + g.slice(0,1) + b.slice(0,1); 
          } 
 
          return hex; 
        } 
 
      } // image onload end 
     
    } // reader onload end 
  } 
  
 } 
 </script> 
 
 </head> 
 
 <body> 
 <p class="title">获取图片像素颜色,转换为CSS3 box-shadow</p> 
 <p><input type="file" class="file" id="img"><label class="filebtn" for="img" title="JPG,GIF,PNG">请选择图片(小于120K)</label></p> 
 <p class="showimg" id="showimg"><span></span></p> 
 <p class="css_code" id="css_code"></p> 
 <p  id="jieguo"></p> 
 </body> 
</html>
--小猿猿--
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用canvas获取图片像素值
http://8.130.10.148:3000/digitaltwin/index.html
01-19 1万+
利用canvas的getImageData方法可以读取画布的某位置像素值。1.首先创建一个canvas对象， var canvas = document.createElement(‘canvas’); 2.获取它的2d上下文。 var context = canvas.getContext(‘2d’); 3.创建一个image对象,并指定它的图片路径，设置允许跨域 var image =
canvas图像识取技术以及智能化设计的思考
趣谈前端
06-05 427
关注并将「趣谈前端」设为星标每早08:30按时推送技术干货/优秀开源/技术思维笔者最近一直在研究前端可视化和搭建化的技术, 最近也遇到一个非常有意思的课题, 就是基于设计稿自动提取...
canvas读取图片，输入文字，调整文字属性，拖拽文字位置，并保存图片
雨果的博客
08-19 4991
我不是专业的前端哦，可能写的不太好，见谅。 整体思路： 共有5层，除了背景颜色的div没什么用之外，canvas1用来读取图片作为背景，canvas2把文字展示出来，canvas3用来展示拖拽的文字，canvas4用来把canvas1背景图片和canvas3拖拽后的文字给画到一个canvas上，实现保存图片的目的。 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&
web canvas图片标点 得像素坐标数组
qq_37152533的博客
09-07 3515
web前端 在图片上标点 获取坐标 Vue 最近在开发过程中有一个需求： 要在一个不规则的物体图片上画标点，获取所有坐标，然后计算出相对面积。 步骤思路： 用canvas元素，进行导入图片 获取鼠标坐标 canvas相对浏览器的距离 取差获得canvas中的坐标值 根据canvas的宽高比映射成为像素坐标 用到两个位置数据（官方文档）：MouseEvent.clientX，MouseEvent...
Canvas——操作像素
mantou_riji的博客
01-17 1420
获取到的像素信息是一个一维数组，四个值是一个像素点的信息分别代表 rgba的四个值，取值都是0-255。// 获取画布的像素信息：画笔.getImageData(x1,y1,x2,y2)// 像素信息是一个一维数组，四个值是一个像素点的信息分别代表 rgba的四个值。（x1,y1）: ImageData 对象左上角的 x和y 坐标，以像素计。ImageData 对象左上角的 x 坐标，以像素计。水平值（x），以像素计，在画布上显示图像的位置。竖直值（y），以像素计，在画布上显示图像的位置。
js中使用canvas生成画布遇见的一些问题
springfeast的博客
07-07 556
uniapp中swiper视频加图片滑动不流畅
HTML5画布Canvas图片抽取、像素信息获取、命中检测
热门推荐
尐轩web前端网络日志
01-14 3万+
今天主要介绍canvas中比较强大的功能 比如将画布内容抽取为图片 获取、修改画布的像素信息 以及画布的命中检测 首先我仍然需要创建画布<canvas id="myCanvas" width=500 height=500></canvas>图片抽取首先要明确的一点是 toDataURL()是canvas对象自身的方法而不是环境对象的 这个方法会将canvas的内容抽取为一张图片（base
智能发票识别系统后台.zip
03-10
通过画布的getImageData和putImageData获取图片的像素点，并制造模糊效果，对比突出当前的识别区域 Js + canvas实现用户动态画图的效果，可以在canvas画布中框出自定义的识别区域和填写区域信息 后端 Spring MVC + ...
html5中监听canvas内部元素点击事件的三种方法
12-14
本文介绍的三种方法适用于识别canvas内形状不规则而且位置无规律的图形点击事件，对于形状规则或者位置有规律的场景，肯定有更简便的实现，这里不做讨论。 像素法 像素检测法的思路是，将canvas中的多个图形（如果
javascript 获取图片颜色
12-11
利用canvas的2d对象，我们可以获取图片每个像素点的数据 CanvasPixelArray 舜子这里也写了一个简单的 getImageData 的演示 图片取色演示。这个演示目前只能在ff3下运行。 能够获取像素点后，是不是以后的OCR文字...
JavaScript利用Canvas识别图片
10-24
利用HTML5中的Canvas识别相似图片
CanvasFingerprintBlock-crx插件
03-20
跟踪cookie通常用于什么，除了可以通过隐身模式浏览禁用，删除或避免cookie之外，而为避免Canvas指纹识别，您需要使用CanvasFingerprintBlock之类的工具。HTML<canvas>元素公开了两种JavaScript函数：用于绘制到画布...
《Android应用开发揭秘》附带光盘代码.
09-30
　5.2.8 图像像素操作 　5.2.9 Shader类介绍 　5.2.10 双缓冲技术 　5.2.11 全屏显示 　5.2.12 获得屏幕属性 　5.3 动画实现 　5.3.1 Tween动画 　5.3.2 Frame动画 　5.3.3 GIF动画播放 　5.4 小结 　第6章 Android...
canvas 像素操作（图片像素操作）
qq_17627195的博客
08-01 2313
ImageData对象中的每个像素都保存了rgba色值的四个值，这四个值以数组形式存在，并存储于ImageData对象的data属性中，并且是将所有的像素的rgba信息存到了一个一维数组里面。getImageData()方法返回ImageData对象，该对象拷贝了画布指定矩形的像素数据。ImageData对象不是图像，它规定了画布上一个部分（矩形），并保存了该矩形内每个像素的信息。方法将图像数据（从指定的ImageData对象）放回画布上。方法直接看下面的教程就可以，一看就明白了。......
Js实现简单的文件类型、文件大小、图片像素校验
qq_39410252的博客
12-11 1011
Js实现文件类型、文件大小、图片像素校验Demo
Three 之 three.js （webgl）PostProcessing/shader/EffectComposer 屏幕渲染 之 简单dotScreen 屏幕点效果
仙魁XAN
09-08 710
开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍， three.js （）中有各种材质，不同材质又有不同的效果，这里做简单的介绍，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。后期处理1、threejs 的后期处理通道包提供了各种强大的效果，有了这些效果会大大降低代码难度，并且可以直接使用内置的着色器包，避免了复杂的着色器代码编写。后期处理通道一般都按顺序执行，后加入的会覆盖前面的通道。2、EffectComposer 用于在three.js中实现后期处理效果。
JS写小游戏「跳一跳」外挂之Canvas图像识别
weixin_34218579的博客
07-12 1473
17年结尾的时候微信发布新版重点推出了「小游戏」概念，H5的游戏再次火了起来，新版微信开屏的游戏就是「跳一跳」游戏可玩度很高，网上也出现了各种语言版本的外挂，前几天看到一篇用nodejs搭建的外挂，需要手动点击截屏图片来判断当前和下一步的位置然后跳转，于是就起了用Canvas来实现图像的想法，后面有实现了自动跳转，算是齐活了。今天来完整说下图像识别。 代...
HP-Socket编译-Linux
最新发布
05-20
HP-Socket编译-Linux
基于tensorflow.js的在线手写数字识别
03-26
1. 引入依赖 首先需要引入 tensorflow.js 的依赖，可以通过以下方式引入： ...``` 2. 创建画布 ...我们需要在页面中创建一个画布，用户可以在上面手写数字。...以上就是基于 tensorflow.js 的在线手写数字识别的实现方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值