Programming/node.js2018.10.12 19:21

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

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



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

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

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

Posted by 구차니

댓글을 달아 주세요

Programming/d32018.10.12 17:31

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 구차니

댓글을 달아 주세요

찾아는 봐야겠지만..

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-객체-컨트롤/]

Posted by 구차니

댓글을 달아 주세요

Programming/d32018.10.12 08:27

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 구차니

댓글을 달아 주세요

머.. 한줄요약하면 드래그 앤 크랍(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]

Posted by 구차니

댓글을 달아 주세요

Programming/node.js2018.10.11 13:35

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

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-서버-운영시-발생하는-오류-대응]

Posted by 구차니

댓글을 달아 주세요

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


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

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


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

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

Posted by 구차니

댓글을 달아 주세요

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]

Posted by 구차니

댓글을 달아 주세요

Programming/d32018.10.11 07:38

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

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 구차니

댓글을 달아 주세요

Programming/css2018.10.10 19:16

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

일단 핵심은 :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 구차니

댓글을 달아 주세요