Programming/javascript & HTML2018. 10. 24. 16:53

formdata dump

ajax로 formdata 보내기

[링크 : https://www.mkyong.com/jquery/jquery-ajax-submit-a-multipart-form/]



생성하기

[링크 : https://developer.mozilla.org/ko/docs/Web/API/FormData/FormData]


보는거 무지 복잡하네..

var formData = new FormData();

formData.append('key1', 'value1');

formData.append('key2', 'value2');


// Display the key/value pairs

for (var pair of formData.entries()) {

    console.log(pair[0]+ ', ' + pair[1]); 

} 

[링크 : https://stackoverflow.com/questions/17066875/how-to-inspect-formdata]


+

var formData = new FormData();


formData.append('items', new Blob([JSON.stringify({

    name: "Book",

    quantity: "12"

})], {

    type: "application/json"

})); 

[링크 : https://stackoverflow.com/...multipart-form-data-with-a-different-content-type-on-each-parts-with-j]


+

var st = imagepath.replace(data:image/png or jpg; base64"/""); 

[링크 : https://stackoverflow.com/questions/22172604/convert-image-url-to-base64]

저작자표시

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

canvas to blob  (2) 2018.10.25
자바스크립트 base64 인코딩, 디코딩  (0) 2018.10.24
js toHexString()  (0) 2018.10.23
jsmpeg div로 사용시 옵션  (0) 2018.10.18
js setinterval  (0) 2018.10.16
Posted by 구차니
Programming/javascript & HTML2018. 10. 23. 11:02

js toHexString()

원래 이런건 지원안해서 직접 만들어야 하나보네..


function toHexString(byteArray) {

  return Array.from(byteArray, function(byte) {

    return ('0' + (byte & 0xFF).toString(16)).slice(-2);

  }).join('')

} 

[링크 : https://stackoverflow.com/questions/34309988/byte-array-to-hex-string-conversion-in-javascript]

저작자표시

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

자바스크립트 base64 인코딩, 디코딩  (0) 2018.10.24
formdata dump  (0) 2018.10.24
jsmpeg div로 사용시 옵션  (0) 2018.10.18
js setinterval  (0) 2018.10.16
ajax each  (0) 2018.10.16
Posted by 구차니
Programming/javascript & HTML2018. 10. 18. 16:25

jsmpeg div로 사용시 옵션

내용은 있었는데 이해를 못했거늘.. 오늘 해보니 되긴하네 췟 -_-

아래와 같은 식으로 'data-'를 접두로 붙이고

문장하나하나를 전부 - 로 토막내주면 된다.

그런 이유로 disableGl은 data-disable-Gl로 변환이 되어 설정하면 된다

<div class="jsmpeg" data-url="ws://localhost:6424" data-disable-gl="true"> 


Note that camelCased options have to be hyphenated when used as data attributes. E.g. decodeFirstFrame: true becomes data-decode-first-frame="true" for the HTML element. 

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

저작자표시

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

formdata dump  (0) 2018.10.24
js toHexString()  (0) 2018.10.23
js setinterval  (0) 2018.10.16
ajax each  (0) 2018.10.16
canvas clearRect  (0) 2018.10.15
Posted by 구차니
Programming/javascript & HTML2018. 10. 16. 09:49

js setinterval

원래 용도는 아니지만 쓰레드나 백그라운드 비슷하게 작동시킬수 있을 듯

(동기 작업으로 해놓고 그걸 백그라운드로 돌린다던가)


[링크 : https://stackoverflow.com/questions/4930439/call-jquery-ajax-request-each-x-minutes]

저작자표시

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

js toHexString()  (0) 2018.10.23
jsmpeg div로 사용시 옵션  (0) 2018.10.18
ajax each  (0) 2018.10.16
canvas clearRect  (0) 2018.10.15
console.log 에 객체 배열 출력하기  (0) 2018.10.15
Posted by 구차니
Programming/javascript & HTML2018. 10. 16. 09:41

ajax each

foreach가 비동기인진 모르겠지만

each는 일단 동기로 작동한다고 한다.


[링크 : https://stackoverflow.com/.../jquery-ajax-each-callback-next-each-firing-before-ajax-completed]

[링크 : https://stackoverflow.com/.../is-jquery-each-function-synchronous]

저작자표시

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

jsmpeg div로 사용시 옵션  (0) 2018.10.18
js setinterval  (0) 2018.10.16
canvas clearRect  (0) 2018.10.15
console.log 에 객체 배열 출력하기  (0) 2018.10.15
ajax를 동기로(?)  (0) 2018.10.15
Posted by 구차니
Programming/javascript & HTML2018. 10. 15. 18:06

canvas clearRect

canvas를 지워주는 녀석

근데.. 투명 이미지의 경우 이상하게 작동하는 것 같으니

투명 이미지를 위해서 이미지 복사시에는 반드시

clearRect() 해주고

drawImage()를 해주어야 한다.


[링크 : https://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing]

저작자표시

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

js setinterval  (0) 2018.10.16
ajax each  (0) 2018.10.16
console.log 에 객체 배열 출력하기  (0) 2018.10.15
ajax를 동기로(?)  (0) 2018.10.15
로컬파일 접근...이 안되는거니까..  (0) 2018.10.12
Posted by 구차니
Programming/javascript & HTML2018. 10. 15. 17:51

console.log 에 객체 배열 출력하기

우회법으로

JSON.stringify() 를 통해 문자열로 변환하고 출력하면 될 듯.


[링크 : https://stackoverflow.com/questions/7912576/console-log-showing-contents-of-array-object]

[링크 : https://www.w3schools.com/js/js_json_stringify.asp]

저작자표시

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

ajax each  (0) 2018.10.16
canvas clearRect  (0) 2018.10.15
ajax를 동기로(?)  (0) 2018.10.15
로컬파일 접근...이 안되는거니까..  (0) 2018.10.12
캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기  (0) 2018.10.11
Posted by 구차니
Programming/javascript & HTML2018. 10. 15. 17:49

ajax를 동기로(?)

일단 우회법을 찾아야 겠지만 돌아가는지 확인하는게 급한지라.. ㅠㅠ

 async: false, 



[링크 : http://ooz.co.kr/58]

저작자표시

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

canvas clearRect  (0) 2018.10.15
console.log 에 객체 배열 출력하기  (0) 2018.10.15
로컬파일 접근...이 안되는거니까..  (0) 2018.10.12
캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기  (0) 2018.10.11
css & jquery animation  (0) 2018.10.11
Posted by 구차니
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' 카테고리의 다른 글

console.log 에 객체 배열 출력하기  (0) 2018.10.15
ajax를 동기로(?)  (0) 2018.10.15
캔버스에 그리고 드래그 하여 다른 캔버스로 영역 복사하기  (0) 2018.10.11
css & jquery animation  (0) 2018.10.11
jquery / js로 배경이미지 변경하기  (0) 2018.10.11
Posted by 구차니
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' 카테고리의 다른 글

ajax를 동기로(?)  (0) 2018.10.15
로컬파일 접근...이 안되는거니까..  (0) 2018.10.12
css & jquery animation  (0) 2018.10.11
jquery / js로 배경이미지 변경하기  (0) 2018.10.11
html canvas 크기  (0) 2018.10.07
Posted by 구차니

티스토리툴바