Programming/node.js2018. 10. 5. 19:25

waveform 출력하는 자바스크립트 모듈

canvas를 이용해서 waveform을 그려주는 녀석인.. 듯?

아무튼 파형 확대/축소도 가능하고

이퀄라이저도 포함되는 녀석이라 한번 써볼만 할 듯


[링크 : https://wavesurfer-js.org]

저작자표시 (새창열림)

'Programming > node.js' 카테고리의 다른 글

node.js mysql PROTOCOL_ENQUEUE_AFTER_FATAL_ERROR 에러  (0) 2018.10.11
node.js 정적 파일 서비스  (0) 2018.10.10
xz로 압축된 node.js 설치하기  (0) 2018.10.02
npm install이 윈도우에서 안될때  (2) 2018.09.27
node.js 를 이용한 HTML 데이터 추출(크롤링)  (4) 2018.09.27
Posted by 구차니
Programming/javascript & HTML2018. 10. 4. 18:57

html5 canvas crop & save

본목적(?)은 canvas로 그려진 jsmpeg을 캡쳐 하는건데

canvas 가 2d 컨텍스트라면 아래의 toDataURL()을 통해서 간단하게

image/png MIME 타입으로 받을수 있다.


var dataURL = canvas.toDataURL('image/png'); 

[링크 : https://weworkweplay.com/play/saving-html5-canvas-as-image/]



다만 기본 값이 GL 가속이라 disableGL을 true로 해주면 canvas가 2d로 설정되기에 캡쳐가 가능한데

문제는.. gl이나 gl-experiment로 설정해도 못받아 오는건 매한가지란거...


disableGl: true

canvas.getContext('2d'); 

[링크 : https://github.com/phoboslab/jsmpeg]


+
2018.10.25


+
2018.11.13
클릭하면 다운로드 되는 예제
해당 링크를 trigger('click')으로 하면 자동으로 다운로드 된다.

<!DOCTYPE html>

<html>

<head>

<style>

.canvas__container {

  height: 100%;

  position: relative;

  width: 100%;

}

.canvas__canvas {

  height: 100%;

  position: relative;

  width: 100%;

  z-index: 1;

}

.canvas__mirror {

  height: 100%;

  left: 0;

  position: absolute;

  top: 0;

  width: 100%; 

}

</style>

</head>

<body>

<div class="canvas__container">

  <canvas id="cnvs" class="canvas__canvas"></canvas>

  <img src="" id="mirror" class="canvas__mirror" />

</div>

<a href="#" class="button" id="btn-download" download="my-file-name.png">Download</a>


<script>

var cnvs = document.getElementById('cnvs'),

    ctx = cnvs.getContext('2d'),

    mirror = document.getElementById('mirror');


cnvs.width = mirror.width = window.innerWidth;

cnvs.height = mirror.height = window.innerHeight;


mirror.addEventListener('contextmenu', function (e) {

    var dataURL = canvas.toDataURL('image/png');

    mirror.src = dataURL;

});


var button = document.getElementById('btn-download');

button.addEventListener('click', function (e) {

var canvas = document.getElementById('cnvs');

    var dataURL = canvas.toDataURL('image/png');

    button.href = dataURL;

});



document.getElementById('btn-download').click();



</script>

</body>

</html> 

[링크 : https://weworkweplay.com/play/saving-html5-canvas-as-image/]

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

jquery / js로 배경이미지 변경하기  (0) 2018.10.11
html canvas 크기  (0) 2018.10.07
json2xls 사용 주의  (0) 2018.10.02
json key 추가/삭제  (0) 2018.09.28
json merge  (0) 2018.09.28
Posted by 구차니
Programming/node.js2018. 10. 2. 23:04

xz로 압축된 node.js 설치하기

라즈베리 구버전을 써서 node.js가 0.10 버전대라

배포판 업그레이드 하거나 밀긴 귀찮아서

node.js arm 용으로 빌드된 걸 받아서 설치해보는데


rpi 2b니까 ARMv7용으로 받고

압축을 풀어서 bin과 lib를 /bin과 /lib로 복사해도 되고

[링크 : https://nodejs.org/ko/download/]


아래와 같이 -C / 이런 옵션을 주고 / 에다가 압축을 풀게 하는 것도 방법일 듯

tar Jxf --strip=1 -C /usr/local node-v4.4.0-linux-x64.tar.xz 

[링크 : https://stackoverflow.com/.../how-to-install-node-linux-binaries-tar-xz-file-in-ubuntu-14-04]

저작자표시 (새창열림)

'Programming > node.js' 카테고리의 다른 글

node.js 정적 파일 서비스  (0) 2018.10.10
waveform 출력하는 자바스크립트 모듈  (0) 2018.10.05
npm install이 윈도우에서 안될때  (2) 2018.09.27
node.js 를 이용한 HTML 데이터 추출(크롤링)  (4) 2018.09.27
npm audit  (0) 2018.09.19
Posted by 구차니
Programming/d32018. 10. 2. 15:51

d3 font color / weight

의외로 쉽네? 싶기도 하고..


svg.append("text")
.style("font-weight", "bold")
.style("fill", "white")
.attr("x",-5)
.attr("y",5)

.text(conn); 


[링크 : https://stackoverflow.com/.../splitting-text-for-some-bold-and-some-not-on-functional-javascript-piece]

[링크 : https://stackoverflow.com/.../how-to-set-text-color-for-my-d3-chart-title]

저작자표시 (새창열림)

'Programming > d3' 카테고리의 다른 글

d3 관련 검색..  (0) 2018.10.12
d3 multi level pie 그래프  (0) 2018.10.11
d3 tooltop  (0) 2018.10.01
d3 를 이용하여 도넛 그래프 그리기  (0) 2018.09.28
d3 graph  (0) 2018.09.27
Posted by 구차니
Programming/javascript & HTML2018. 10. 2. 11:11

json2xls 사용 주의

버그인가...

데이터는 더 있는데 필드가 추가 안되는 문제가 있네..

(혹시나 해서 json도 저장해놔서 비교하는데 이런 문제가..)


[링크 : https://www.npmjs.com/package/json2xls]

[링크 : https://www.npmjs.com/package/json-to-excel]

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

html canvas 크기  (0) 2018.10.07
html5 canvas crop & save  (0) 2018.10.04
json key 추가/삭제  (0) 2018.09.28
json merge  (0) 2018.09.28
jquery 선택자  (0) 2018.09.27
Posted by 구차니
Programming/d32018. 10. 1. 21:40

d3 tooltop

path.each() 가 현재 선택한 값을 d로 넘겨주고

그걸 이용해서 d.data에 path에서 연결된 dataset의 한개 항목을 넘겨준다.


[링크 : http://bl.ocks.org/arpitnarechania/577bd1d188d66dd7dffb69340dc2d9c9]

[링크 : https://stackoverflow.com/.../get-one-element-from-d3js-selection-by-index]

저작자표시 (새창열림)

'Programming > d3' 카테고리의 다른 글

d3 관련 검색..  (0) 2018.10.12
d3 multi level pie 그래프  (0) 2018.10.11
d3 font color / weight  (0) 2018.10.02
d3 를 이용하여 도넛 그래프 그리기  (0) 2018.09.28
d3 graph  (0) 2018.09.27
Posted by 구차니
Programming/javascript & HTML2018. 9. 28. 15:27

json key 추가/삭제

동적 추가

var keyname = '';

var something = { };

something[keyname + 'postfix'] = 'value'; 

[링크 : https://blog.outsider.ne.kr/675]


삭제

var json = {NAME: "John", AGE: 30, SEX: "male"};

json.BIRTHDAY = '2001-03-01';

delete json.SEX; 

[링크 : https://gent.tistory.com/21]


+

2018.11.21

[링크 : https://stackoverflow.com/questions/19837916/creating-object-with-dynamic-keys]

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

html5 canvas crop & save  (0) 2018.10.04
json2xls 사용 주의  (0) 2018.10.02
json merge  (0) 2018.09.28
jquery 선택자  (0) 2018.09.27
jquery n번째 요소 선택하기, select 선택하기  (0) 2018.09.27
Posted by 구차니
Programming/d32018. 9. 28. 14:52

d3 를 이용하여 도넛 그래프 그리기

다른거 받아와서 쓰는데 이것저것 검색중..

function donut_instance(w, h, element_id) {
var dataset = [
{ name: 'IE', percent: 39.10 },
{ name: 'Chrome', percent: 32.51 },
{ name: 'Safari', percent: 13.68 },
{ name: 'Firefox', percent: 8.71 },
{ name: 'Others', percent: 6.01 }
];

var pie = d3.layout.pie()
.value(function (d) { return d.percent })
.sort(null)
.padAngle(.03);

//var w = 300, h = 300;

var outerRadius = (w * 0.60) / 2;
var innerRadius = (w * 0.30) / 2;;

var color = d3.scale.category20c();

var arc = d3.svg.arc()
.outerRadius(outerRadius)
.innerRadius(innerRadius);

var svg = d3.select(element_id)
.append("svg")
.attr({
width: w,
height: h,
class: 'shadow'
}).append('g')
.attr({
transform: 'translate(' + (w / 2) + ',' + (h / 2 + 2) + ')'
});

var path = svg.selectAll('path')
.data(pie(dataset))
.enter();

path.append('path')
.transition()
.duration(1000)
.attr({
d: arc,
fill: function (d, i) {
return color(d.data.name);
}
})
.attrTween('d', function(d) {
var i = d3.interpolate(d.startAngle+0.1, d.endAngle);
return function(t) {
d.endAngle = i(t);
return arc(d)
}
})
;

svg.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 5)
.attr("fill", "black")
.transition()
.duration(1000)
.attr("r", 25)
.attr("fill", "#3182bd");

svg.append("text")
.attr("x",-5)
.attr("y",5)
.text('5');
}


[링크 : https://blog.nacyot.com/articles/2015-02-02-d3-selection/]

[링크 : https://bl.ocks.org/rshaker/225c6df494811f46f6ea53eba63da817]

[링크 : https://www.tutorialspoint.com/d3js/d3js_transition.htm]

[링크 : https://www.tutorialspoint.com/d3js/d3js_animation.htm]

[링크 : http://bl.ocks.org/nadinesk/99393098950665c471e035ac517c2224]

저작자표시 (새창열림)

'Programming > d3' 카테고리의 다른 글

d3 관련 검색..  (0) 2018.10.12
d3 multi level pie 그래프  (0) 2018.10.11
d3 font color / weight  (0) 2018.10.02
d3 tooltop  (0) 2018.10.01
d3 graph  (0) 2018.09.27
Posted by 구차니
Programming/javascript & HTML2018. 9. 28. 08:15

json merge

json으로 값을 받아서 중복되는 하나의 key 목록을 얻고 싶은데

assign이나 for문으로 합치는데, 그걸 도와주는 모듈도 있지만 흐음...


[링크 : https://stackoverflow.com/questions/21450060/how-to-join-two-javascript-objects-without-using-jquery]

[링크 : https://www.npmjs.com/package/merge-json]


+ 2018.10.02

xls 등으로 출력을 하도록 하니 알아서 생성되는 듯

굳이 하나의 json으로 합치지 않아도 되는 듯

저작자표시 (새창열림)

'Programming > javascript & HTML' 카테고리의 다른 글

json2xls 사용 주의  (0) 2018.10.02
json key 추가/삭제  (0) 2018.09.28
jquery 선택자  (0) 2018.09.27
jquery n번째 요소 선택하기, select 선택하기  (0) 2018.09.27
css 배경 이미지 회전, 크기 등  (0) 2018.09.27
Posted by 구차니
Programming/node.js2018. 9. 27. 23:04

npm install이 윈도우에서 안될때

집에서는 잘 안하긴 했지만.. 회사에서도 윈도우인데 잘 돌아갔는데..

왜 안되나 해서 찾아보니.. 파이썬이 없어서 그런건가?


D:\work\node>npm install http-request


> mmmagic@0.5.1 install D:\work\node\node_modules\mmmagic

> node-gyp rebuild



D:\work\node\node_modules\mmmagic>if not defined npm_config_node_gyp (node "C:\P

rogram Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..

\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "C:\Program Fil

es\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild )

gyp ERR! configure error

gyp ERR! stack Error: Can't find Python executable "python", you can set the PYT

HON env variable.

gyp ERR! stack     at PythonFinder.failNoPython (C:\Program Files\nodejs\node_mo

dules\npm\node_modules\node-gyp\lib\configure.js:484:19)

gyp ERR! stack     at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_mod

ules\npm\node_modules\node-gyp\lib\configure.js:509:16)

gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\grac

eful-fs\polyfills.js:284:29

gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:152:21)

gyp ERR! System Windows_NT 6.1.7601

gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodej

s\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"

gyp ERR! cwd D:\work\node\node_modules\mmmagic

gyp ERR! node -v v8.12.0

gyp ERR! node-gyp -v v3.8.0

gyp ERR! not ok

npm WARN cancer@1.0.0 No description

npm WARN cancer@1.0.0 No repository field.


npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! mmmagic@0.5.1 install: `node-gyp rebuild`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the mmmagic@0.5.1 install script.

npm ERR! This is probably not a problem with npm. There is likely additional log

ging output above.


npm ERR! A complete log of this run can be found in:

npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2018-09-27T13_58_50

_212Z-debug.log 


하는데 드럽게 오래걸리네...

근데 회사는 윈10이라 그런건가.. 무슨 차이지?

(관리자 권한으로 아래는 실행해야 함)

npm install --global --production windows-build-tools

npm install --global node-gyp 

[링크 : https://code.i-harness.com/ko-kr/q/e6ce22]

저작자표시 (새창열림)

'Programming > node.js' 카테고리의 다른 글

waveform 출력하는 자바스크립트 모듈  (0) 2018.10.05
xz로 압축된 node.js 설치하기  (0) 2018.10.02
node.js 를 이용한 HTML 데이터 추출(크롤링)  (4) 2018.09.27
npm audit  (0) 2018.09.19
promise-mysql  (0) 2018.09.18
Posted by 구차니

티스토리툴바