[javascript] 특정문자 길이로 자르기 (match함수) 



match함수를 통한

특정문자 길이로 자르는 경우로 자르기.




1. 아래의 코드를 사용한다.


function chunkString(str, length) {
//length의 길이 만큼 글자를 자른다.
return str.match(new RegExp('.{1,' + length + '}', 'g'));
// 정규식으로 length의 길이만 큼 자라서 배열로 return 합니다.
}




2. 결과화면 





블로그 이미지

미나미나미

,

[javascript] 자바스크립트 화면 캡쳐하기 (html2canvas.js) 


화면을 캡쳐하기 위해서 

javascript를 통하여 캡쳐하도록 해보겠습니다.


html2canvas.js 사용해보기



1. html2canvas.js 코드를 가져옵니다.


공식홈페이지 : https://html2canvas.hertzen.com/ 

또는 githumb 주소 : https://github.com/niklasvh/html2canvas/releases



 



2. script를 설정해줍니다. (jquery가 필요없습니다 . 생략이 가능합니다.)


<script src="js/html2canvas.js"></script>

 



3. body를 표현합니다. (screenshot을 테스트 환경을 위해서)


<!-- 전체 부분-->
<button onclick=bodyShot()>bodyShot</button>
<!-- 일부분 부분-->
<button onclick=partShot()>partShot</button>

<div class="container" id='container'>
<!-- 로컬에서 불러온 파일 -->
<img src="img/1534347627.jpg">
<!-- 웹에서 불러온 파일 -->
<img src="https://www.w3schools.com/html/img_girl.jpg">
<!-- <img src="https://source.unsplash.com/user/erondu/400x400"> -->
</div>
<!-- 결과화면을 그려줄 canvas -->
<canvas id="canvas" width="900" height="600"
style="border:1px solid #d3d3d3;"></canvas>





4. 버튼 2개에 대해서 이벤트를 만들어줍니다.


function bodyShot() {
//전체 스크린 샷하기
html2canvas(document.body)
//document에서 body 부분을 스크린샷을 함.
.then(
function (canvas) {
//canvas 결과값을 drawImg 함수를 통해서
//결과를 canvas 넘어줌.
//png의 결과 값
drawImg(canvas.toDataURL('image/png'));

//appendchild 부분을 주석을 풀게 되면 body
//document.body.appendChild(canvas);

//특별부록 파일 저장하기 위한 부분.
saveAs(canvas.toDataURL(), 'file-name.png');
}).catch(function (err) {
console.log(err);
});
}

function partShot() {
//특정부분 스크린샷
html2canvas(document.getElementById("container"))
//id container 부분만 스크린샷
.then(function (canvas) {
//jpg 결과값
drawImg(canvas.toDataURL('image/jpeg'));
//이미지 저장
saveAs(canvas.toDataURL(), 'file-name.jpg');
}).catch(function (err) {
console.log(err);
});
}

function drawImg(imgData) {
console.log(imgData);
//imgData의 결과값을 console 로그롤 보실 수 있습니다.
return new Promise(function reslove() {
//내가 결과 값을 그릴 canvas 부분 설정
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//canvas의 뿌려진 부분 초기화
ctx.clearRect(0, 0, canvas.width, canvas.height);

var imageObj = new Image();
imageObj.onload = function () {
ctx.drawImage(imageObj, 10, 10);
//canvas img를 그리겠다.
};
imageObj.src = imgData;
//그릴 image데이터를 넣어준다.

}, function reject() { });

}
function saveAs(uri, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
window.open(uri);
}
}






5. 결과화면




로컬의 이미지들은 캡쳐가 되나 그 외는 캡쳐가 되지를 않는다....


이 부분을 해결하고 싶지만 아직은 해결 하지 못했다.





블로그 이미지

미나미나미

,

안드로이드 화면 회전 감지(Android rotation detection)


안드로이드 화면의 전환시 

처리를 해야할 경우가 있습니다.

그래서, 기록합니다.



1. AndroidManifest.xml 에서 내가 감지할 Activity에 설정을 해줍니다. 

예를 들어, MainActivty를 감지해야하는 경우. 

아래와 같이 작성을 합니다.

<activity android:name=".MainActivity"
android:configChanges="orientation|screenSize|keyboard|keyboardHidden"
>


2. MainActivty.java에서 onConfigurationChanged 함수를 Overrid 해줍니다.


@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
Log.d("onConfigurationChanged" , "onConfigurationChanged");
if(newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){//세로 전환시
Log.d("onConfigurationChanged" , "Configuration.ORIENTATION_PORTRAIT");
}else if(newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE){ //가로전환시
Log.d("onConfigurationChanged", "Configuration.ORIENTATION_LANDSCAPE");
}else{

}
}


onCreate()함수 있는 곳에 두시면 됩니다.





블로그 이미지

미나미나미

,

안드로이드 웹뷰(WebView) 로컬 html 파일 열기



1. assets/www 을 만들어서 html 파일 넣기 


주황색 테두리 안에 넣어주세요.




2. loadUrl로 로컬 파일 불러오기


# 안드로이드 웹뷰 테스트하기 참고하세요.

 http://minaminaworld.tistory.com/84

mWebView = (WebView) findViewById(R.id.webView);
mWebView.loadUrl("file:///android_asset/www/test.html");


블로그 이미지

미나미나미

,

안드로이드(android) Gson(gson) 사용하기



안드로이드에서 Gson 사용하기




1. build.gradle(Module: app) -> depencies 에 추가하기 


complie에서 implementation으로 명시하는 것으로 변경되었다고 한다.


# 참고 사항 https://developer.android.com/studio/build/dependencies?utm_source=android-studio#dependency_configurations

implementation 'com.google.code.gson:gson:2.8.2'





2. 사용할 코드 부분에서 import를 한다.

import com.google.gson.Gson;
import com.google.gson.JsonArray;
import com.google.gson.JsonObject;

Gson gson = new Gson(); // Gson을 사용하기 위한 선언



예시로 String -> JsonArray -> JsonArray값들 출력


1. String 값을 JsonArray로 변환 

JsonArray reader = gson.fromJson(message , JsonArray.class);
// message : Json Array의 값을 JSON.stringify()화를 만든 것을
// 다시 JsonArray를 만듭니다.


2. JsonArray값 출력

JsonObject obj = null; // JsonObject 값을 출력하기 위한 선언
for (int i = 0; i < reader.size(); i++) { //jsonArray 사이즈 만큼 loop
obj = reader.get(i).getAsJsonObject();//jsonArray 배열 JsonObject를 가져옴
Log.d(getClass().getName() , obj.toString()); //toString으로 출력
}


# 참고 사이트 : https://www.mkyong.com/java/how-do-convert-java-object-to-from-json-format-gson-api/




블로그 이미지

미나미나미

,

웹뷰(webview) 하얗게 나오는 경우(ssl인증 무시하기)


대형 사이트들의 경우 https 통신과 

ssl 인증서가 있음으로 웹뷰를 통해서 정상적으로 

표시가 되나 없는 경우 하얗게 아무것도 안나오는 경우가 있다.

이런 경우, 그냥 통과하는 코드를 작성해주면 된다.




1. ssl 부분을 통과할 java 파일 생성 


나의 경우 SslWebViewConnect.java를 생성


import android.net.http.SslError;
import android.webkit.SslErrorHandler;
import android.webkit.WebView;
import android.webkit.WebViewClient;

//웹뷰 로드시 SSL 인증서 에러 방지
public class SslWebViewConnect extends WebViewClient {

@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed(); // SSL 에러가 발생해도 계속 진행!
}

public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;//응용프로그램이 직접 url를 처리함
}
}



2. webview를 생성할 때 처리를 한다.



#참고 http://minaminaworld.tistory.com/84를 참고하시면 더 빠르게 이해가 가능합니다.

WebSettings webSettings = webView1.getSettings();

webSettings.setJavaScriptEnabled(true);
webSettings.setLoadsImagesAutomatically(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
webSettings.setUseWideViewPort(true);
webSettings.setSafeBrowsingEnabled(false);
webSettings.setGeolocationEnabled(true);
webSettings.setDomStorageEnabled(true);
/*
필요한 설정은 참고
setJavaScriptEnabled(true);
// javascript를 실행할 수 있도록 설정
setJavaScriptCanOpenWindowsAutomatically (true);
// javascript가 window.open()을 사용할 수 있도록 설정
setBuiltInZoomControls(false);
// 안드로이드에서 제공하는 줌 아이콘을 사용할 수 있도록 설정
setPluginState(WebSettings.PluginState.ON_DEMAND);
// 플러그인을 사용할 수 있도록 설정
setSupportMultipleWindows(false);
// 여러개의 윈도우를 사용할 수 있도록 설정
setSupportZoom(false);
// 확대,축소 기능을 사용할 수 있도록 설정
setBlockNetworkImage(false);
// 네트워크의 이미지의 리소스를 로드하지않음
setLoadsImagesAutomatically(true);
// 웹뷰가 앱에 등록되어 있는 이미지 리소스를 자동으로 로드하도록 설정
setUseWideViewPort(true);
// wide viewport를 사용하도록 설정
setCacheMode(WebSettings.LOAD_NO_CACHE);
// 웹뷰가 캐시를 사용하지 않도록 설정
*/
webView1.setWebViewClient(new SslWebViewConnect());
//ssl 인증이 없는 경우 해결을 위한 부분
webView1.setWebChromeClient(new WebChromeClient() {
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
public void onPermissionRequest(final PermissionRequest request) {
request.grant(request.getResources());
}
});


블로그 이미지

미나미나미

,

안드로이드(android) webview 테스트하기


안드로이드에서 webview를 

테스트하는 방법을 

기록합니다.



1. AndroidManifest.xml에 

internet 퍼미션과 hardwareAccelerated : true 해준다.



빨간색 테두리 부분들만 건들리면 됩니다.





2. activity_main.xml의 WebView을 구현하기


 




3. MainActivity.java(기존 생성된 자바 파일)과 

WebSetting.java(만든 자바 파일)


MainActivity.java(기존 생성된 자바 파일)




WebSetting.java(만든 자바 파일)


import android.annotation.TargetApi;
import android.os.Build;
import android.webkit.PermissionRequest;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebSetting extends WebViewClient {
public WebView webSetting(WebView webView){

WebView webView1 = webView;

WebSettings webSettings = webView1.getSettings();

webSettings.setJavaScriptEnabled(true);
webSettings.setLoadsImagesAutomatically(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
webSettings.setUseWideViewPort(true);
webSettings.setSafeBrowsingEnabled(false);
webSettings.setGeolocationEnabled(true);
webSettings.setDomStorageEnabled(true);
/*
필요한 설정은 참고
setJavaScriptEnabled(true);
// javascript를 실행할 수 있도록 설정
setJavaScriptCanOpenWindowsAutomatically (true);
// javascript가 window.open()을 사용할 수 있도록 설정
setBuiltInZoomControls(false);
// 안드로이드에서 제공하는 줌 아이콘을 사용할 수 있도록 설정
setPluginState(WebSettings.PluginState.ON_DEMAND);
// 플러그인을 사용할 수 있도록 설정
setSupportMultipleWindows(false);
// 여러개의 윈도우를 사용할 수 있도록 설정
setSupportZoom(false);
// 확대,축소 기능을 사용할 수 있도록 설정
setBlockNetworkImage(false);
// 네트워크의 이미지의 리소스를 로드하지않음
setLoadsImagesAutomatically(true);
// 웹뷰가 앱에 등록되어 있는 이미지 리소스를 자동으로 로드하도록 설정
setUseWideViewPort(true);
// wide viewport를 사용하도록 설정
setCacheMode(WebSettings.LOAD_NO_CACHE);
// 웹뷰가 캐시를 사용하지 않도록 설정
*/
//webView1.setWebViewClient(new SslWebViewConnect());
//ssl 인증이 없는 경우 해결을 위한 부분
// webView1.setWebChromeClient(new WebChromeClient() {
// @TargetApi(Build.VERSION_CODES.LOLLIPOP)
// @Override
// public void onPermissionRequest(final PermissionRequest request) {
// request.grant(request.getResources());
// }
// });
return webView1;
}
}


블로그 이미지

미나미나미

,

파파고 NMT 테스트 / JSP로 해보기 (Servlet 사용)



nmt 파파고 api를 jsp로 테스트 해보겠습니다.


사용방법은 ajax - servlet를 사용합니다.


간단한 테스트를 진행합니다.




1. 파파고 nmt를 사용하기 위해서


open API 이용 신청을 하여야 합니다.


 https://developers.naver.com/products/nmt/ 



Client_ID와 Client_Secret의 값이 필요합니다.




2. client id 와 secret 이 생성된 후에 jsp 페이지를 생성합니다.



textarea 2개,

실행할 button 1개를 만듭니다.


그리고, jquery를 추가해줍니다.


<p>NMT를 테스를 합니다.</p>

<textarea id="send_text" class="form-control" name="content" cols="40" rows="4" placeholder="보낼값"></textarea>
<button id="jsonConvertStringSend" type="button"> 번역하기 </button>
<textarea id="result_text" class="form-control" name="content" cols="40" rows="4" placeholder="결과값" readonly></textarea>


<script>
//번역을 위해서 button 이벤트를 위해서 사용하는 것
$('#jsonConvertStringSend').click(function () {
//번역할 object를 생성
var test = {
"original_str": $("#send_text").val()
};
jsonSend(test);
});
function jsonSend(test) {
$.ajax({
type: "POST",
url: "/TistoryExample/NMTTestServlet",
data: test, //json을 보내는 방법
success: function (data) { //서블렛을 통한 결과 값을 받을 수 있습니다.
console.log(data);
//alert(data);

//string의 값을 object 형식으로 변환합니다.
var resulut_obj = JSON.parse(data);
//결과값을 textarea에 넣기 위해서
$("#result_text").val(resulut_obj.message.result.translatedText);
},
error: function (e) {
console.log(e);
alert('실패했습니다.');
}
});
}
</script>




3. servlet를 만들어줍니다.


protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("NMTTestServlet doPost 메소드가 실행되었습니다.");
    request.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=utf-8");

    //번역할 text 값을 받아 옵니다
    String original_str = (String)request.getParameter("original_str");

    //결과값 보내기 위한것
    PrintWriter out = response.getWriter();
    out.print((String)nmtReturnRseult(original_str));
    
}

// nmtReturnResult의 함수를 통해서 한글 - > 영어로 번역
public String nmtReturnRseult(String original_str){
    
    //애플리케이션 클라이언트 아이디값";
    String clientId = "jPPntjzUc09zBQsT_zU7";
    //애플리케이션 클라이언트 시크릿값";
    String clientSecret = "iSGGw0F3NI";
    
    String resultString ="";
    try {
        //original_str 값이 우리가 변환할 값
        String text = URLEncoder.encode(original_str, "UTF-8");
        
        String apiURL = "https://openapi.naver.com/v1/papago/n2mt";
        URL url = new URL(apiURL);
        HttpURLConnection con = (HttpURLConnection)url.openConnection();
        con.setRequestMethod("POST");
        con.setRequestProperty("X-Naver-Client-Id", clientId);
        con.setRequestProperty("X-Naver-Client-Secret", clientSecret);
        // post request
        String postParams = "source=ko&target=en&text=" + text;
        con.setDoOutput(true);
        DataOutputStream wr = new DataOutputStream(con.getOutputStream());
        wr.writeBytes(postParams);
        wr.flush();
        wr.close();
        int responseCode = con.getResponseCode();
        BufferedReader br;
        if(responseCode==200) { // 정상 호출
            br = new BufferedReader(new InputStreamReader(con.getInputStream()));
        } else { // 에러 발생
            br = new BufferedReader(new InputStreamReader(con.getErrorStream()));
        }
        String inputLine;
        StringBuffer response = new StringBuffer();
        while ((inputLine = br.readLine()) != null) {
            response.append(inputLine);
        }
        br.close();
        System.out.println(response.toString());
        
        resultString = response.toString();
    } catch (Exception e) {
        System.out.println(e);
    }
    
    return resultString;
}




블로그 이미지

미나미나미

,