Programming/node.js2018.10.12 19:21

node tmp uuid

cropper.js 써보다 보니 uuid로 업로드된 파일이 변경되길래

먼가하고 찾는데 딱히 그걸 지원하는 무언가는 없는 듯?



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

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

   [링크 : https://fengyuanchen.github.io/cropperjs/]

저작자표시

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

node tmp uuid  (0) 2018.10.12
node.js mysql PROTOCOL_ENQUEUE_AFTER_FATAL_ERROR 에러  (0) 2018.10.11
node.js 정적 파일 서비스  (0) 2018.10.10
waveform 출력하는 자바스크립트 모듈  (0) 2018.10.05
xz로 압축된 node.js 설치하기  (0) 2018.10.02
npm install이 윈도우에서 안될때  (0) 2018.09.27
Posted by 구차니
Trackback 0 Comment 0

댓글을 달아 주세요

Programming/d32018.10.12 17:31

d3 timeline

chart를 생성할때 d3.timeline()에 .stack()을 넣어주지 않으면 한줄로 나온다. -_-



function add_timeline() {
var testData = [
{
class: "pA", label: "person a", times: [
{ "starting_time": 1355752800000, "ending_time": 1355759900000 },
{ "starting_time": 1355767900000, "ending_time": 1355774400000 }]
},
{
class: "pB", label: "person b", times: [
{ "starting_time": 1355759910000, "ending_time": 1355761900000 }]
},
{
class: "pC", label: "person c", times: [
{ "starting_time": 1355761910000, "ending_time": 1355763910000 }]
}
];

var chart = d3.timeline()
.stack();

var svg = d3.select("#timeline")
.append("svg")
.attr("width", 500)
.attr("height", 300)
.datum(testData)
.call(chart);

}

[링크 : https://github.com/jiahuang/d3-timeline]

저작자표시

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

d3 timeline  (0) 2018.10.12
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 를 이용하여 도넛 그래프 그리기  (0) 2018.09.28
Posted by 구차니
Trackback 0 Comment 0

댓글을 달아 주세요

Programming/javascript & HTML2018.10.12 13:21

로컬파일 접근...이 안되는거니까..

찾아는 봐야겠지만..

fakepath와는 별개로


cropper.getCroppedCanvas({

  width: 160,

  height: 90,

  minWidth: 256,

  minHeight: 256,

  maxWidth: 4096,

  maxHeight: 4096,

  fillColor: '#fff',

  imageSmoothingEnabled: false,

  imageSmoothingQuality: 'high',

});


// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`

cropper.getCroppedCanvas().toBlob((blob) => {

  const formData = new FormData();


  formData.append('croppedImage', blob);


  // Use `jQuery.ajax` method

  $.ajax('/path/to/upload', {

    method: "POST",

    data: formData,

    processData: false,

    contentType: false,

    success() {

      console.log('Upload success');

    },

    error() {

      console.log('Upload error');

    },

  });

}); 


[링크 : https://github.com/fengyuanchen/cropperjs]


+

[링크 : https://www.npmjs.com/package/form-data]

[링크 : https://skout90.github.io/2018/08/24/Node.js/blob-객체-컨트롤/]

저작자표시

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

로컬파일 접근...이 안되는거니까..  (0) 2018.10.12
캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기  (0) 2018.10.11
css & jquery animation  (0) 2018.10.11
jquery / js로 배경이미지 변경하기  (0) 2018.10.11
html canvas 크기  (0) 2018.10.07
html5 canvas crop & save  (0) 2018.10.04
Posted by 구차니
Trackback 0 Comment 0

댓글을 달아 주세요

Programming/d32018.10.12 08:27

d3 관련 검색..

gallery가 이것저것 키워드 얻는 용도랑, 예제 찾기로 쓰면 좋음

[링크 : https://github.com/d3/d3/wiki]

[링크 : https://github.com/d3/d3/wiki/Gallery]


timeline 그래프

[링크 : https://github.com/commodityvectors/d3-timeline]


태그 클라우드(나중에 블로그에...)

[링크 : https://www.jasondavies.com/wordcloud/]


enter/exit

[링크 : https://bost.ocks.org/mike/join/]

저작자표시

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

d3 timeline  (0) 2018.10.12
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 를 이용하여 도넛 그래프 그리기  (0) 2018.09.28
Posted by 구차니
Trackback 0 Comment 0

댓글을 달아 주세요

Programming/javascript & HTML2018.10.11 19:10

캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기

머.. 한줄요약하면 드래그 앤 크랍(drag & crop)

jsmpeg으로 영상을 보여주는 canvas에 드래그를 하면 복사해서 다른 캔버스로 넣어주는 코드


주의 :정비율 출력은 좀 더 찾아 봐야 함


//Mouseup
$(canvas).on('mouseup', function (e) {
mousedown = false;

// copy
mousex = parseInt(e.clientX - canvasx);
mousey = parseInt(e.clientY - canvasy);
var width = mousex - last_mousex;
var height = mousey - last_mousey;

// canvas resized calibration
var can_w = document.getElementById('video-canvas').width;
var can_h = document.getElementById('video-canvas').height;
var act_w = document.getElementById('video-canvas').scrollWidth;
var act_h = document.getElementById('video-canvas').scrollHeight;

var tact_w = document.getElementById('target_obj_cnv').width;
var tact_h = document.getElementById('target_obj_cnv').height;

var cnvs = document.getElementById('video-canvas');
var ctx = cnvs.getContext('2d');
var dataURL = cnvs.toDataURL('image/png');

var cnvs = document.getElementById('target_obj_cnv');
var ctxt = cnvs.getContext('2d');
var img = new Image();
img.src = dataURL;
img.onload = function () {
ctxt.drawImage(img,
last_mousex * can_w / act_w,
last_mousey * can_h / act_h,
width * can_w / act_w,
height * can_h / act_h,
0,
0,
tact_w,
tact_h);
}



---


void ctx.drawImage(image, dx, dy);

void ctx.drawImage(image, dx, dy, dWidth, dHeight);

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); 

[링크 : https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage]


img로 받아온 걸 drawImage로 canvas에 그리기

var img = new Image();

  img.src = "image.jpg";

  img.onload = function() {

  context.drawImage(img, 0, 0);

  }; 

[링크 : https://stackoverflow.com/.../how-can-i-change-the-image-source-within-a-canvas-using-jquery]


img to canvas

canvas to canvas로 쓸만한 방법

원본 영상을 원하는 대로 잘라서 쓸 수 있다.

[링크 : https://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/]


getImage는 원하는 영역을 잘라낼수 있는 장점이 있다.

하지만 getImage는 영상 데이터를 RGB 배열로 받아서, toDataURL() 처럼 Img에 넣는 방법을 쓸 수 없다

어떠한 변환을 통해 Base64 인코딩 해서 넣을수 있다면 쓸 수는 있을 듯

[링크 : https://stackoverflow.com/questions/28538913/crop-an-image-displayed-in-a-canvas]

저작자표시

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

로컬파일 접근...이 안되는거니까..  (0) 2018.10.12
캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기  (0) 2018.10.11
css & jquery animation  (0) 2018.10.11
jquery / js로 배경이미지 변경하기  (0) 2018.10.11
html canvas 크기  (0) 2018.10.07
html5 canvas crop & save  (0) 2018.10.04
Posted by 구차니
Trackback 0 Comment 0

댓글을 달아 주세요

Programming/node.js2018.10.11 13:35

node.js mysql PROTOCOL_ENQUEUE_AFTER_FATAL_ERROR 에러

명확한 원인과 해결방법은 아직 못 찾음

mac과 centos에서 node.js를 통해 mysql 접속시 장시간 지난후

이런 에러가 발생을 하는데 mysql 쪽 세션 timeout 이 원인으로 추정됨


{"code":"PROTOCOL_ENQUEUE_AFTER_FATAL_ERROR","fatal":false} 


[링크 : https://stackoverflow.com/.../node-js-mysql-protocol-enqueue-after-fatal-error]

[링크 : https://stackoverflow.com/...mac-and-have-an-error-occurred-when-deploying-on-centos]



+

일정 주기로 쓸모없는 쿼리문 보내도록 해주는 미봉책

[링크 : http://nashorn.tistory.com/entry/Nodejs-서버-운영시-발생하는-오류-대응]

저작자표시

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

node tmp uuid  (0) 2018.10.12
node.js mysql PROTOCOL_ENQUEUE_AFTER_FATAL_ERROR 에러  (0) 2018.10.11
node.js 정적 파일 서비스  (0) 2018.10.10
waveform 출력하는 자바스크립트 모듈  (0) 2018.10.05
xz로 압축된 node.js 설치하기  (0) 2018.10.02
npm install이 윈도우에서 안될때  (0) 2018.09.27
Posted by 구차니
Trackback 0 Comment 0

댓글을 달아 주세요

Programming/javascript & HTML2018.10.11 07:56

css & jquery animation

jquery를 이용한 애니메이션 설정


$(selector).animate({params},speed,callback); 

[링크 : https://www.w3schools.com/jquery/jquery_animate.asp]


마우스 오버시 줌 애니메이션(트랜지션 시간 설정)

[링크 : https://www.w3schools.com/howto/howto_css_zoom_hover.asp]

저작자표시

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

로컬파일 접근...이 안되는거니까..  (0) 2018.10.12
캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기  (0) 2018.10.11
css & jquery animation  (0) 2018.10.11
jquery / js로 배경이미지 변경하기  (0) 2018.10.11
html canvas 크기  (0) 2018.10.07
html5 canvas crop & save  (0) 2018.10.04
Posted by 구차니
Trackback 0 Comment 0

댓글을 달아 주세요

Programming/javascript & HTML2018.10.11 07:55

jquery / js로 배경이미지 변경하기

jquery로 css를 변경하는 방법

$("p").css("background-color"); 

[링크 : https://www.w3schools.com/jquery/jquery_css.asp]

[링크 : https://www.tutorialspoint.com/How-to-change-the-background-image-using-jQuery]


+

2018.10.11


$("#my_image").attr("src","second.jpg"); 

[링크 : https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery]

저작자표시

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

캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기  (0) 2018.10.11
css & jquery animation  (0) 2018.10.11
jquery / js로 배경이미지 변경하기  (0) 2018.10.11
html canvas 크기  (0) 2018.10.07
html5 canvas crop & save  (0) 2018.10.04
json2xls 사용 주의  (0) 2018.10.02
Posted by 구차니
Trackback 0 Comment 0

댓글을 달아 주세요

Programming/d32018.10.11 07:38

d3 multi level pie 그래프

직접 그리는 법을 찾아 보려고 하니

drilldown이라는 키워드가 보인다. 머하는 녀석인진 아직 파악 못함


[링크 : https://pshivale.github.io/psd3/]

[링크 : https://github.com/pshivale/psd3/blob/gh-pages/psd3.js]


drilldown

[링크 : https://stackoverflow.com/questions/23153403/drilldown-multiple-levels-highchart]

[링크 : http://bl.ocks.org/alessioalex/6448911]

저작자표시

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

d3 timeline  (0) 2018.10.12
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 를 이용하여 도넛 그래프 그리기  (0) 2018.09.28
Posted by 구차니
Trackback 0 Comment 0

댓글을 달아 주세요

Programming/css2018.10.10 19:16

css로 백그라운드만 돌리기

잘 안되네... (예제만은 잘됨.. 내꺼에는 안됨.. ㅠㅠ)

일단 핵심은 :before라는 슈도 태그 인듯..

(근데 난 d3로 svg 그리는데 zindex랑 꼬여서 영 안됨..)


body

{

font-family: arial, helvetica, freesans, sans-serif;

font-size: 100%;

color: #333;

background-color: #ddd;

}


h1

{

font-size: 1.5em;

font-weight: normal;

margin: 0;

  text-align: center;

  padding-top: 1em;

}


#element2

{

width: 12em;

font-size: 2em;

text-align: center;

line-height: 5em;

margin: 3em auto;

border: 2px solid #666;

border-radius: 7px;


  position: relative;

overflow: hidden;

}


#element2:before

{

content: "";

position: absolute;

width: 200%;

height: 200%;

top: -50%;

left: -50%;

z-index: -1;

background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/background.png) 0 0 repeat;

transform: rotate(45deg);

} 


[링크 : https://www.sitepoint.com/css3-transform-background-image/]

[링크 : https://stackoverflow.com/questions/24842026/rotate-background-image-of-div-90-degrees-using-jquery]

저작자표시

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

css로 백그라운드만 돌리기  (0) 2018.10.10
css 계층 구조? 상속? 선택자 조합자?  (0) 2018.09.05
sass scss  (0) 2018.09.05
hover inline css  (0) 2018.08.27
css selector  (0) 2018.08.21
css BEM( Block Element Modifier)  (0) 2018.08.21
Posted by 구차니
Trackback 0 Comment 0

댓글을 달아 주세요