NodeJS realizes image text segmentation

NodeJS realizes image text segmentation

This article shares the specific code of NodeJS to implement image text segmentation for your reference. The specific content is as follows

var fs = require('fs');
var jpeg = require('jpeg-js')
 
 
function getSumRGB(data, i)
{
 var cr = data.data[i+0]
 var cg = data.data[i+1]
 var cb = data.data[i+2]
 var srgb = (cr+cg+cb)
 return srgb
}
 
function getTopRGB(data, i)
{
 var topIndex = (data.width * 4 * -1)
 i= i + topIndex;
 var cr = data.data[i+0]
 var cg = data.data[i+1]
 var cb = data.data[i+2]
 
 return [cr,cg,cb]
}
 
function getHeightRGB(data, i, haveRGB)
{
 var width = data.width
 var height = data.height
 var len = width * height * 4
 var haveNum = 0
 
 for(i=i;i<len;i+=width*4)
 {
  if(getSumRGB(data, i) == haveRGB)
  {
   haveNum++
  }
 }
 
 return haveNum
}
 
function ClearBackGround(data)
{ 
 var width = data.width
 var height = data.height
 var len = width * height * 4
 var i, tmp
 for(i=0;i<len;i+=4) 
 {
  tmp = getSumRGB(data, i)
  if(tmp > 120*3) {
   data.data[i+0]=255
   data.data[i+1]=255
   data.data[i+2]=255
  }
 }
 
 for(i=0;i<len;i+=4)
 {
  tmp = getSumRGB(data, i)
  if(tmp <= 32*3) {
   tmp = getTopRGB(data, i)
   data.data[i+0]=tmp[0]
   data.data[i+1]=tmp[1]
   data.data[i+2]=tmp[2]
  }
 }
 
 for(i=0;i<len;i+=4)
 {
  tmp = getSumRGB(data, i)
  if(tmp != 255*3) {
   data.data[i+0]=0
   data.data[i+1]=0
   data.data[i+2]=0
  }
 }
 
 var maxwidth = width * 4
 var arrlist = []
 arrlist[0]=[]
 arrlist[1]=[]
 arrlist[2]=[]
 arrlist[3]=[]
 arrnum = 0
 block = 0
 
 for(i=0;i<maxwidth;i+=4)
 {
  tmp = getHeightRGB(data, i, 0)
  if(tmp==0) {
   if(block != 0) {
    arrlist[arrnum] = [block/4,i/4]
    block=0
    arrnum++
   }
  } else if(tmp >0 ) {
   if(block == 0) {
    block = i
   }
  }
 }
 
 console.log(arrlist)
 
 return data
}
 
 
var picname = "tmp.jpg"
var newpicname = "000.jpg"
var jpegData = fs.readFileSync(picname)
var rawImageData = jpeg.decode(jpegData, {useTArray: true})
rawImageData = ClearBackGround(rawImageData)
var jpegImageData = jpeg.encode(rawImageData,100)
fs.writeFileSync(newpicname, jpegImageData.data)

Let me share with you the method of implementing image cutting with JS:

//Picture cutting var ImgCropper = Class.create();
ImgCropper.prototype = {
  //Container object, control layer, image address initialize: function(container, handle, url, options) {
    this._Container = $(container);//Container objectthis._layHandle = $(handle);//Control layerthis.Url = url;//Image addressthis._layBase = this._Container.appendChild(document.createElement("img"));//Bottom layerthis._layCropper = this._Container.appendChild(document.createElement("img"));//Cutting layerthis._layCropper.onload = Bind(this, this.SetPos);
    //Used to set the size this._tempImg = document.createElement("img");
    this._tempImg.onload = Bind(this, this.SetSize);
    
    this.SetOptions(options);
    
    this.Opacity = Math.round(this.options.Opacity);
    this.Color = this.options.Color;
    this.Scale = !!this.options.Scale;
    this.Ratio = Math.max(this.options.Ratio, 0);
    this.Width = Math.round(this.options.Width);
    this.Height = Math.round(this.options.Height);
    
    //Set the preview object var oPreview = $(this.options.Preview); //Preview object if (oPreview) {
        oPreview.style.position = "relative";
        oPreview.style.overflow = "hidden";
        this.viewWidth = Math.round(this.options.viewWidth);
        this.viewHeight = Math.round(this.options.viewHeight);
        //Preview image object this._view = oPreview.appendChild(document.createElement("img"));
        this._view.style.position = "absolute";
        this._view.onload = Bind(this, this.SetPreview);
    }
    //Set up drag and drop this._drag = new Drag(this._layHandle, { Limit: true, onMove: Bind(this, this.SetPos), Transparent: true });
    //Set zoom this.Resize = !!this.options.Resize;
    if(this.Resize){
        var op = this.options, _resize = new Resize(this._layHandle, { Max: true, onResize: Bind(this, this.SetPos) });
        //Set the zoom trigger object op.RightDown && (_resize.Set(op.RightDown, "right-down"));
        op.LeftDown && (_resize.Set(op.LeftDown, "left-down"));
        op.RightUp && (_resize.Set(op.RightUp, "right-up"));
        op.LeftUp && (_resize.Set(op.LeftUp, "left-up"));
        op.Right && (_resize.Set(op.Right, "right"));
        op.Left && (_resize.Set(op.Left, "left"));
        op.Down && (_resize.Set(op.Down, "down"));
        op.Up && (_resize.Set(op.Up, "up"));
        //Minimum range limit this.Min = !!this.options.Min;
        this.minWidth = Math.round(this.options.minWidth);
        this.minHeight = Math.round(this.options.minHeight);
        //Set the scaling object this._resize = _resize;
    }
    //Set style this._Container.style.position = "relative";
    this._Container.style.overflow = "hidden";
    this._layHandle.style.zIndex = 200;
    this._layCropper.style.zIndex = 100;
    this._layBase.style.position = this._layCropper.style.position = "absolute";
    this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0; //Alignment //Initialization settings this.Init();
  },
  //Set default properties SetOptions: function(options) {
    this.options = {//Default value Opacity: 50, //Transparency (0 to 100)
        Color: "", //Background colorWidth: 0, //Image heightHeight: 0, //Image height//Scaling trigger objectResize: false, //Whether to set scalingRight: "", //Right scaling objectLeft: "", //Left scaling objectUp: "", //Upper scaling objectDown: "", //Bottom scaling objectRightDown: "", //Bottom right scaling objectLeftDown: "", //Bottom left scaling objectRightUp: "", //Upper right scaling objectLeftUp: "", //Upper left scaling objectMin: false, //Whether to set minimum width and height limit (the min parameter below is useful when true)
        minWidth: 50, // minimum width minHeight: 50, // minimum height Scale: false, // whether to scale proportionally Ratio: 0, // scaling ratio (width/height)
        //Preview object settings Preview: "", //Preview object viewWidth: 0, //Preview width viewHeight: 0 //Preview height };
    Extend(this.options, options || {});
  },
  // Initialize the object Init: function() {
    //Set the background color this.Color && (this._Container.style.backgroundColor = this.Color);
    //Set the picture this._tempImg.src = this._layBase.src = this._layCropper.src = this.Url;
    //Set transparent if(isIE){
        this._layBase.style.filter = "alpha(opacity:" + this.Opacity + ")";
    } else {
        this._layBase.style.opacity = this.Opacity / 100;
    }
    //Set the preview object this._view && (this._view.src = this.Url);
    //Set zoom if (this.Resize) {
        with(this._resize){
            Scale = this.Scale; Ratio = this.Ratio; Min = this.Min; minWidth = this.minWidth; minHeight = this.minHeight;
        }
    }
  },
  //Set cutting style SetPos: function() {
    //IE6 rendering bug
    if (isIE6) { with (this._layHandle.style) { zoom = .9; zoom = 1; }; };
    //Get position parameters var p = this.GetPos();
    //Cut according to the parameters of the drag and drop object this._layCropper.style.clip = "rect(" + p.Top + "px " + (p.Left + p.Width) + "px " + (p.Top + p.Height) + "px " + p.Left + "px)";
    //Set preview this.SetPreview();
  },
  //Set the preview effect SetPreview: function() {
    if(this._view){
        //Preview display width and height var p = this.GetPos(), s = this.GetSize(p.Width, p.Height, this.viewWidth, this.viewHeight), scale = s.Height / p.Height;
        //Set parameters proportionally var pHeight = this._layBase.height * scale, pWidth = this._layBase.width * scale, pTop = p.Top * scale, pLeft = p.Left * scale;
        //Set the preview object with(this._view.style){
            //Set style width = pWidth + "px"; height = pHeight + "px"; top = - pTop + "px "; left = - pLeft + "px";
            //Cutting preview image clip = "rect(" + pTop + "px " + (pLeft + s.Width) + "px " + (pTop + s.Height) + "px " + pLeft + "px)";
        }
    }
  },
  //Set the image size SetSize: function() {
    var s = this.GetSize(this._tempImg.width, this._tempImg.height, this.Width, this.Height);
    //Set the base map and cutting map this._layBase.style.width = this._layCropper.style.width = s.Width + "px";
    this._layBase.style.height = this._layCropper.style.height = s.Height + "px";
    //Set the drag and drop range this._drag.mxRight = s.Width; this._drag.mxBottom = s.Height;
    //Set the zoom range if (this.Resize) { this._resize.mxRight = s.Width; this._resize.mxBottom = s.Height; }
  },
  //Get the current style GetPos: function() {
    with(this._layHandle){
        return { Top: offsetTop, Left: offsetLeft, Width: offsetWidth, Height: offsetHeight }
    }
  },
  //Get size GetSize: function(nowWidth, nowHeight, fixWidth, fixHeight) {
    var iWidth = nowWidth, iHeight = nowHeight, scale = iWidth / iHeight;
    //Set according to the proportion if (fixHeight) { iWidth = (iHeight = fixHeight) * scale; }
    if(fixWidth && (!fixHeight || iWidth > fixWidth)){ iHeight = (iWidth = fixWidth) / scale; }
    //Return size object return { Width: iWidth, Height: iHeight }
  }
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • js to split and upload large files

<<:  Detailed tutorial on installing and configuring MySQL 5.7.20 under Centos7

>>:  Record the process of connecting to the local Linux virtual machine via SSH

Recommend

Why do we need Map when we already have Object in JavaScript?

Table of contents 1. Don’t treat objects as Maps ...

Detailed explanation of the basic commands of Firewalld firewall in Centos7

1. Basics of Linux Firewall The Linux firewall sy...

Detailed explanation of how to use $props, $attrs and $listeners in Vue

Table of contents background 1. Document Descript...

Related commands to completely uninstall nginx under ubuntu16.04

nginx Overview nginx is a free, open source, high...

How to deploy nginx with Docker and modify the configuration file

Deploy nginx with docker, it's so simple Just...

Semantic web pages XHTML semantic markup

Another important aspect of separating structure ...

Vue Beginner's Guide: Environment Building and Getting Started

Table of contents Initial Vue Building a Vue deve...

Basic use of javascript array includes and reduce

Table of contents Preface Array.prototype.include...

MySQL 5.7 JSON type usage details

JSON is a lightweight data exchange format that u...

Vue.js style layout Flutter business development common skills

Correspondence between flutter and css in shadow ...

5 common scenarios and examples of JavaScript destructuring assignment

Table of contents Preface 1. Extract data 2. Alia...

Essential skills for designing web front-end interfaces

[Required] UserInterface PhotoShop/Fireworks Desi...

HTML table markup tutorial (43): VALIGN attribute of the table header

In the vertical direction, you can set the alignm...