meltingice / CamanJS

Javascript HTML5 (Ca)nvas (Man)ipulation
http://camanjs.com
BSD 3-Clause "New" or "Revised" License
3.56k stars 406 forks source link

NodeJS Canvas is not a constructor #232

Open safoine27 opened 6 years ago

safoine27 commented 6 years ago

I tried running the example of NodeJS but it kept giving me this error

const Caman = require('caman').Caman;

Caman("user-icon.jpg", function () {
  this.brightness(40);
  this.render(function () {
    this.save("./output.png");
  });
});

and it gave me this error

_this.canvas = new Canvas(img.width, img.height); ^

TypeError: Canvas is not a constructor

misterh01 commented 5 years ago

i got same error and idk how to solve it

NiteshSaxena commented 5 years ago

+1

bhavyasanchaniya commented 5 years ago

@safoine27 @Badvillain01 @NiteshSaxena replace in caman.full.js line no: 371 this.canvas = new Canvas.Canvas(this.imageWidth(), this.imageHeight());

misterh01 commented 5 years ago

@bhavyasanchaniya...How?..installed it through npm

furyOO7 commented 5 years ago

@Badvillain01 How did you install Camanjs through npm? I have been trying to do the same with no success even though I have also installed all the addition dependency mentioned(node-gyp & Installing GTK 2).

NoiseEee commented 5 years ago

Hi folks! I'm thrilled to say that I have solved this error. I was lucky enough to have a working version from a while ago, and my Caman stuff was breaking while I was trying to modernize my script, so I compared the difference. The difference was actually the canvas package that Caman relies upon. If you don't specify the version in your package.json, Caman will go and download the latest (2.5.x at time of this message), however this version does not work with Caman. As far as I can tell, you need to choose a 1.x version of the canvas package.

So, make sure you add "canvas" as a dependency in your package.json, and restrict the version to 1.6.x. So, for example:

"dependencies" : {
      "canvas": "~1.6.13",
      "caman": "^4.1.2"
}

... and you should be good to go!!

NoiseEee commented 5 years ago

... and you should be good to go!!

Yes you will get warnings spit to screen about deprecations in the old Canvas package, but I can confirm all this works on Node 8.x.x

inkquery commented 5 years ago

@safoine27 @Badvillain01 @NiteshSaxena replace in caman.full.js line no: 371 this.canvas = new Canvas.Canvas(this.imageWidth(), this.imageHeight());

Works but this is not suitable solution. I tried to choose a 1.x version of the canvas package but that not solved the issue

slimtiexxx commented 5 years ago

You can use my package where i fixed the problem by changing the line: this.canvas = new Canvas.Canvas(this.imageWidth(), this.imageHeight());

Just replace the original caman with this line: "caman": "git+https://gitlab.com/modernframe/caman.git"

suchetaswabhav commented 2 years ago

Hi ,

function readBarCodeSync(){
var filepath =  './barcode-128-image_2.png';
var buf = fs.readFileSync(filepath);
//var canvas = new Canvas(640, 480);
 var canvas =new Canvas.Canvas(this.imageWidth(), this.imageHeight());

var Image = Canvas.Image;
var ctx = canvas.getContext('2d');

fs.readFileSync(filepath, function (err, squid) {
    if (err) throw err;
    let img = new Image;
    img.src = squid;
    img.onload = function () {
    ctx.drawImage(img, 0, 0, 640, 480);
    }
});

let imgData = ctx.getImageData(0, 0, 640, 480);
const code = javascriptBarcodeReader(imgData /* ImageData */ , { 
    barcode: 'code-128', // 'code-128'
    type: 'interleaved', //standard/interleaved optional type
});

console.log(code); // output as null
}

I am getting error - TypeError: this.imageWidth is not a function at readBarCodeSync (D:\telegram_finesse_app_v1-master\server\barcodescan.server.js:91:36) at Layer.handle [as handle_request] (D:\telegram_finesse_app_v1-master\node_modules\express\lib\router\layer.js:95:5) at next (D:\telegram_finesse_app_v1-master\node_modules\express\lib\router\route.js:137:13) at Route.dispatch (D:\telegram_finesse_app_v1-master\node_modules\express\lib\router\route.js:112:3) at Layer.handle [as handle_request] (D:\telegram_finesse_app_v1-master\node_modules\express\lib\router\layer.js:95:5) at D:\telegram_finesse_app_v1-master\node_modules\express\lib\router\index.js:281:22 at Function.process_params (D:\telegram_finesse_app_v1-master\node_modules\express\lib\router\index.js:335:12) at next (D:\telegram_finesse_app_v1-master\node_modules\express\lib\router\index.js:275:10) at Function.handle (D:\telegram_finesse_app_v1-master\node_modules\express\lib\router\index.js:174:3) at router (D:\telegram_finesse_app_v1-master\node_modules\express\lib\router\index.js:47:12)

suchetaswabhav commented 2 years ago

My package.json - "caman": "git+https://gitlab.com/modernframe/caman.git", "canvas": "^2.8.0",