자바 스크립트로 쉽게 아마존 스타일의 이미지 트리밍을 할 수있는 라이브러리!
전치
esa.io로 사내용으로 쓴 것을 이쪽으로 이전.
자바 스크립트로 쉽게 얼굴을 인식 할 수있는 라이브러리 그리고, javascript로 화상의 얼굴 인식을 할 수 있는 라이브러리를 소개해 실천했습니다만, 얼굴 인식한 화상을 잘라낼 수 있으면(자) 기계 학습등에 사용할 수 있을까요? 라고 생각해, 이미지 트리밍할 수 없는지 조사하고 있었는데, 간단하게 할 수 있는 라이브러리를 발견했으므로 사용해 보았다.
Cropper
Cropper 라고 하는 Jquery 의 이미지 자르기 플러그인 + Canvas 를 사용한다.
Canvas(캔버스)란?
Javascript로 그래프나 도형 등을 그릴 수 있다. (이번에는 잘라낸 이미지를 그리는 데 사용)
더 알고 싶은 분은 HTML5 공식 사이트를 읽어 주세요~.
소개
거꾸로 아래의 4 단계.
① Cropper 에서 필요한 것을 다운로드
②다운로드한 것을 임의의 디렉토리에 배치해, jquery와 함께 읽어들입니다.
③이미지를 준비. 결정된 방법, 옵션을 부르는 것만
④canvas로 잘라낸 이미지를 생성한다
Cropper 공식 사이트 에서 아마존 스타일의 자르기 동작을 확인할 수 있지만 기능이 너무 많기 때문에 사용하기 쉽도록 먼저 필요한 최소한으로 만듭니다.
만들어 본 결과
공식 사이트에 있듯이 실시간 자르지 않는 것이 아쉽지만,,,
참조의 어딘가에 대응 방법이 기재되어 있을 것입니다.
소스 코드
GitHub
이하, 코피페로 ok. 이미지 부분만 직접 준비하고 변경하십시오.
html, js는 같은 계층에 배치하고 있습니다.
index.html<!DOCTYPE html>
<html>
<head>
<title>Cropper</title>
<link rel="stylesheet" type="text/css" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.js"></script>
<script type="text/javascript" src="cropperImg.js"></script>
//少ないのでcssベタ書き。ここら辺は好みでカスタマイズしてください
<style>
.img-container {
width: 400px;
height: 300px;
display: inline-block;
}
.img-canvas {
display: inline-block;
}
</style>
</head>
<body>
<div class="img-container">
<img src="img/fluits.jpg" id="img−default" class="img-responsive" alt="fluits">
</div>
<!-- トリミングされた画像が表示される場所。縦横は好みで設定 -->
<canvas id="jsi-canvas" class="img-canvas" width="200" height="200"></canvas>
</body>
</html>
cropperImg.jsvar FLUITS = FLUITS || {};
FLUITS.PICKUP = {
VECTOR_X: 1,
VECTOR_Y: 1,
IMG_PATH: 'img/fluits.jpg',
IMG_SETTING: {
background: false, //背面の柄消去
modal:false, //背面のフィルター消去
aspectRatio: this.VECTOR_X / this.VECTOR_Y // ここでアスペクト比の調整 ワイド画面にしたい場合は 16 / 9
},
init:function(){
this.setParameters();
this.bindEvent();
},
setParameters:function(){
this.$imgDef = $('#img−default');
this.$cutBtn = $('.jsc-cut-btn');
this.$imgDef.cropper(this.IMG_SETTING);
this.$cropperBorder = $('.cropper-crop-box');
this.img = new Image();
this.canvas = document.getElementById('jsi-canvas').getContext('2d');//お決まりの書き方なのでそのまま使用
},
bindEvent:function(){
var self = this;
this.$cropperBorder.on('mousemove', function() { //動きを監視
self.setImgParams();
});
},
setImgParams:function(){
var data = this.$imgDef.cropper('getData'); //getDataは用意されたオプション
var imageData = {
x: Math.round(data.x),
y: Math.round(data.y),
width: Math.round(data.width),
height: Math.round(data.height),
vectorX: this.VECTOR_X,
vectorY: this.VECTOR_Y
};
this.drawImg(imageData);
},
drawImg:function(data){
this.img.src = this.IMG_PATH;
this.canvas.drawImage(
this.img,
data['x'],
data['y'],
data['width'],
data['height'],
0,0,//切り出されるCanvas内での座標指定
data['vectorX']*120, //切り出される画像の横幅
data['vectorY']*120 //切り出される画像の縦幅
);
}
}
$(function(){
FLUITS.PICKUP.init();
});
후기
레퍼런스도 제대로 하고 있기 때문에, 제대로 읽으면 사용할 수 있을 것 같다!
화상의 줌 기능도 붙어 있어, EC 사이트라든지 그런데는 적합하지 않을까~
참고
이미지를 자르는 jquery 플러그인 "Cropper"를 사용해보기
손쉽게 아바타 크기로 자르는 jQuery 플러그인
jQuery : 이미지 자르기 플러그인 "Cropper.js"의 가이드에 페이스 라인을 추가하여 증명 사진 시스템의 자르기 인터페이스를 부드럽게하자!
캔버스에서 즐겁게하는 법
이미지를 그리는 명령 drawImage()
【JS로 얼굴 인식】 화상으로부터 판정하는 방법
Reference
이 문제에 관하여(자바 스크립트로 쉽게 아마존 스타일의 이미지 트리밍을 할 수있는 라이브러리!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hcrane/items/ebccf5c18d2119ef9347
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Cropper 라고 하는 Jquery 의 이미지 자르기 플러그인 + Canvas 를 사용한다.
Canvas(캔버스)란?
Javascript로 그래프나 도형 등을 그릴 수 있다. (이번에는 잘라낸 이미지를 그리는 데 사용)
더 알고 싶은 분은 HTML5 공식 사이트를 읽어 주세요~.
소개
거꾸로 아래의 4 단계.
① Cropper 에서 필요한 것을 다운로드
②다운로드한 것을 임의의 디렉토리에 배치해, jquery와 함께 읽어들입니다.
③이미지를 준비. 결정된 방법, 옵션을 부르는 것만
④canvas로 잘라낸 이미지를 생성한다
Cropper 공식 사이트 에서 아마존 스타일의 자르기 동작을 확인할 수 있지만 기능이 너무 많기 때문에 사용하기 쉽도록 먼저 필요한 최소한으로 만듭니다.
만들어 본 결과
공식 사이트에 있듯이 실시간 자르지 않는 것이 아쉽지만,,,
참조의 어딘가에 대응 방법이 기재되어 있을 것입니다.
소스 코드
GitHub
이하, 코피페로 ok. 이미지 부분만 직접 준비하고 변경하십시오.
html, js는 같은 계층에 배치하고 있습니다.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cropper</title>
<link rel="stylesheet" type="text/css" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.js"></script>
<script type="text/javascript" src="cropperImg.js"></script>
//少ないのでcssベタ書き。ここら辺は好みでカスタマイズしてください
<style>
.img-container {
width: 400px;
height: 300px;
display: inline-block;
}
.img-canvas {
display: inline-block;
}
</style>
</head>
<body>
<div class="img-container">
<img src="img/fluits.jpg" id="img−default" class="img-responsive" alt="fluits">
</div>
<!-- トリミングされた画像が表示される場所。縦横は好みで設定 -->
<canvas id="jsi-canvas" class="img-canvas" width="200" height="200"></canvas>
</body>
</html>
cropperImg.js
var FLUITS = FLUITS || {};
FLUITS.PICKUP = {
VECTOR_X: 1,
VECTOR_Y: 1,
IMG_PATH: 'img/fluits.jpg',
IMG_SETTING: {
background: false, //背面の柄消去
modal:false, //背面のフィルター消去
aspectRatio: this.VECTOR_X / this.VECTOR_Y // ここでアスペクト比の調整 ワイド画面にしたい場合は 16 / 9
},
init:function(){
this.setParameters();
this.bindEvent();
},
setParameters:function(){
this.$imgDef = $('#img−default');
this.$cutBtn = $('.jsc-cut-btn');
this.$imgDef.cropper(this.IMG_SETTING);
this.$cropperBorder = $('.cropper-crop-box');
this.img = new Image();
this.canvas = document.getElementById('jsi-canvas').getContext('2d');//お決まりの書き方なのでそのまま使用
},
bindEvent:function(){
var self = this;
this.$cropperBorder.on('mousemove', function() { //動きを監視
self.setImgParams();
});
},
setImgParams:function(){
var data = this.$imgDef.cropper('getData'); //getDataは用意されたオプション
var imageData = {
x: Math.round(data.x),
y: Math.round(data.y),
width: Math.round(data.width),
height: Math.round(data.height),
vectorX: this.VECTOR_X,
vectorY: this.VECTOR_Y
};
this.drawImg(imageData);
},
drawImg:function(data){
this.img.src = this.IMG_PATH;
this.canvas.drawImage(
this.img,
data['x'],
data['y'],
data['width'],
data['height'],
0,0,//切り出されるCanvas内での座標指定
data['vectorX']*120, //切り出される画像の横幅
data['vectorY']*120 //切り出される画像の縦幅
);
}
}
$(function(){
FLUITS.PICKUP.init();
});
후기
레퍼런스도 제대로 하고 있기 때문에, 제대로 읽으면 사용할 수 있을 것 같다!
화상의 줌 기능도 붙어 있어, EC 사이트라든지 그런데는 적합하지 않을까~
참고
이미지를 자르는 jquery 플러그인 "Cropper"를 사용해보기
손쉽게 아바타 크기로 자르는 jQuery 플러그인
jQuery : 이미지 자르기 플러그인 "Cropper.js"의 가이드에 페이스 라인을 추가하여 증명 사진 시스템의 자르기 인터페이스를 부드럽게하자!
캔버스에서 즐겁게하는 법
이미지를 그리는 명령 drawImage()
【JS로 얼굴 인식】 화상으로부터 판정하는 방법
Reference
이 문제에 관하여(자바 스크립트로 쉽게 아마존 스타일의 이미지 트리밍을 할 수있는 라이브러리!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hcrane/items/ebccf5c18d2119ef9347텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
