newJS

Hi, I have a 200 * 200 painting. I want to enlarge this picture (eg 1200 * 700). of course by preserving the image quality. I learned that the way to do this is interpolation. I use the OpenCV.js library to interpolate. However, both my mathematical operations and openCV processes take a long time. Average 70 ms. I have to reduce this to 30-40 ms. I will try to do my mathematical operations on the GPU using GPU.js. But I don't have much experience dealing with pictures. Does anyone have any idea how to speed up interpolation for this, of course, how to get a better view? PS: I don't mean give me the code. I'm looking for a library or a sample project that can be used for these tasks, or a hint to guide. I had asked a similar question before, but now my program has changed and I want to ask again because I have different problems.

It can actually be thought of as a waterfall where data flows. The data I get will generally be between 50k-100k. I will draw them on a different canvas in the background and reflect them on the screen in accordance with the size of the canvas displayed. But I started to think that there was such a limit. I felt the need to ask because I could not find a source.

I use putImageData and getImageData functions in my project. But I think I came across a limit when using them. I searched but could not find any information about it. There seems to be a limit of 65536 on Chrome and 32768 on Firefox. Does anyone have any information about this? The variable "pixelLength" in the example does not give an output when set to 65536. var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var pixelLength = 65535; var wf = document.createElement("canvas"); wf.width = pixelLength; wf.height = 16; var ctx_wf = wf.getContext("2d"); function CreateImageData() { var data = ctx_wf.createImageData(pixelLength, 1); for (var i = 0; i < data.data.length; i += 4) { data.data[i + 0] = 255; data.data[i + 1] = 0; data.data[i + 2] = 0; data.data[i + 3] = 255; } return data; } var imgData = CreateImageData(); ctx_wf.putImageData(imgData, 0, 0); var width = c.width; var height = c.height; ctx.drawImage(ctx_wf.canvas, 0, 0, pixelLength, wf.height, 0, 0, width, height);

Hi I have an image like the picture below. I need to resize this image.(between x2 and x10) When I resized with Canvas's own features, I couldn't get the image I wanted. The image was pixelated. I used OpenCV's javascript library for this. (To be able to do interpolation) But here I did not get the exact result I wanted and it was slow in speed(40 - 60 ms). The resizing speed should be between about 10 - 20 ms. Then I wanted to write an algorithm myself, but I could not prevent pixelation, and the image I wanted was not revealed. In fact, if I can make gradient for each pixel according to the pixels around it (right, left, down and up), I think I can get the image I want. Is there anyone who can help me with this?

Hi everyone, I have a picture that I draw pixel by pixel on the canvas. Size of the image: 512 * 256. When I make this picture 1536 * 768, the image looks very bad. I think I can use interpolation to fix this. But I couldn't find a good javascript library. It didn't work in the libraries I found. Is there anyone who can help me with this?

I'm trying to read data from the file as follows and send data to the client. I can send a 20MB file in 30 seconds. But I have to send 20MB per second. Am I doing something wrong? [Server.js] var File = require('File') var FileReader = require('filereader'), fileReader = new FileReader(); fileReader.setNodeChunkedEncoding(true || false); fileReader.readAsArrayBuffer(new File('../Test.txt')); fileReader.addEventListener('load', function (ev) { JsonData = JSON.stringify(new Int16Array(ev.target.result);); }); var app = require('express')(); var http = require('http').createServer(app); var io = require('socket.io')(http); io.on('connection', function(socket){ console.log('a user connected'); console.log("DateTime : " + getDateTime()); socket.on("update", function(data){ console.log("DateTime : " + getDateTime()); socket.send(JsonData); }); socket.send(JsonData); socket.on('message', function(msg){ console.log('message: ' + msg); }); socket.on('disconnect', function(){ console.log('user disconnected'); }); }); http.listen(9099, function(){ console.log('listening on *:9099'); }); [Client.js] var socket = io("http://localhost:9099"); socket.on('message', function(message) { var JsonData = JSON.parse(message); socket.emit("update", { data:"getData"}); }); Socket.io version : 2.2.0 Filereader version: 0.10.3 NodeJS version: 10.16.3

What I want to do is actually something like this. https://drive.google.com/open?id=1j0uKGNVsFAd8Oq4ZgJrpSCnVufYiiRpD Will keep coming 30k point continuously. Last points will be added to the top of the canvas. At other points it will go down. I was able to do it using PutImageData. But I don't know if it makes sense to use WebGL for a 30k dot. If it makes sense, I would consider switching to WebGL with PixiJS. But I have no idea how to do it using Pixi JS.

Actually I don't water simulation. I do an audio waterfall and I couldn't find a way still. I make would like the following using WebGL with PixiJS. There will be about 32768 dots. https://drive.google.com/file/d/1jG44SZXtJgPortNT0b3DfaQf00kLOoHg/view

Thanks for answer but I make would like the following https://drive.google.com/file/d/1jG44SZXtJgPortNT0b3DfaQf00kLOoHg/view There will be about 32768 dots. When I do this deliver better performance WebGL or 2d?

Hi everyone, I would like to make an audio waterfall like the following using WebGL with PixiJS. But I couldn't find a way. Can those who know help?