HTML5 : 캔버스 이미지를 데이터베이스에 저장

캔버스 이미지를 데이터베이스에 저장하는 방법입니다. 그래서 여기에 서명 패드가 있고 그 안에는 새 창을 열고 이미지를 표시하는 저장 버튼이 있습니다. 저장 단추의 기능을 변경하여 나중에 이미지를 데이터베이스에 저장하여 나중에 표시하려고합니다. BTW 메신저 PHPmyadmin을 사용하여.HTML5 : 캔버스 이미지를 데이터베이스에 저장

메신저 내가 그것을 데이터베이스 여기

에 삽입 할 처리 할 수있는 다음 페이지로 보낼 DATAurl를 얻기에 문제가이

index.html을 내 코드의

<body onselectstart="return false"> 


    <div id="signature-pad" class="m-signature-pad"> 
    <div class="m-signature-pad--body" > 
     <canvas> 

     </canvas> 
    </div> 
    <div class="m-signature-pad--footer"> 
     <div class="description">Sign above</div> 
     <button type="button" class="button clear" data-action="clear">Clear</button> 
     <button type="button" class="button save" data-action="save">Save</button> 
    </div> 
    </div> 

    <script src="js/signature_pad.js"></script> 
    <script src="js/app.js"></script> 
</body>`

앱 .js

var wrapper = document.getElementById("signature-pad"), 
    clearButton = wrapper.querySelector("[data-action=clear]"), 
    saveButton = wrapper.querySelector("[data-action=save]"), 
    canvas = wrapper.querySelector("canvas"), 
    signaturePad; 

// Adjust canvas coordinate space taking into account pixel ratio, 
// to make it look crisp on mobile devices. 
// This also causes canvas to be cleared. 
function resizeCanvas() { 
    // When zoomed out to less than 100%, for some very strange reason, 
    // some browsers report devicePixelRatio as less than 1 
    // and only part of the canvas is cleared then. 
    var ratio = Math.max(window.devicePixelRatio || 1, 1); 
    canvas.width = canvas.offsetWidth * ratio; 
    canvas.height = canvas.offsetHeight * ratio; 
    canvas.getContext("2d").scale(ratio, ratio); 
} 

window.onresize = resizeCanvas; 
resizeCanvas(); 

signaturePad = new SignaturePad(canvas); 

clearButton.addEventListener("click", function (event) { 
    signaturePad.clear(); 
}); 

saveButton.addEventListener("click", function (event) { 
    if (signaturePad.isEmpty()) { 
     alert("Please provide signature first."); 
    } else { 
     window.open(signaturePad.toDataURL()); 
    } 
});

Here is a JSfiddle

감사합니다.

출처

2016-12-07 ooo-Ghost-ooo

죄송합니다. 하지만 그게 내가 어떻게 시작 해야할지 모르겠 문제입니다. 나는 방금 자바 스크립트를 배우기 시작했다. –

데이터베이스에 저장하는 것은 일반적으로 서버에서 수행되므로 JavaScript와 관련이 없으며 서버 측에서 일부 코드가 필요합니다. JavaScript를 처음 사용하는 사람이라면, 이렇게 간단한 질문을하는 것이 좋지 않기 때문에 좀 더 간단한 것을 시도해 보는 것이 좋습니다. – fstanis

@ftanis 내가 window.open (signaturePad.toDataURL());을'window.open ("newpage.php? image ="signaturePad.toDataURL());으로 변경하고'$ _GET ['image ']'하고 데이터베이스에 삽입하면 효과가 있다고 생각합니까? –

답을 찾았습니다. 그리고 나는 대답을해야한다고 생각합니다. 다른 사람들도 같은 문제를 겪을 수 있습니다.

다음 페이지로 DataURL을 보내주십시오. 단지 형태와 자바 스크립트의 숨겨진 입력을 추가 난 그냥

saveButton.addEventListener("click", function post (event) { 

    if (signaturePad.isEmpty()) { 
     alert("Please provide signature first."); 
    } else { 
     document.body.innerHTML += '<form id="form" action="newpage.php" method="post"><input type="hidden" name="image" value="'+signaturePad.toDataURL()+'"></form>'; 
     document.getElementById("form").submit(); 

    } 
    });

에

saveButton.addEventListener("click", function (event) { 
    if (signaturePad.isEmpty()) { 
     alert("Please provide signature first."); 
    } else { 
     window.open(signaturePad.toDataURL()); 
    } 
});

에서 내 코드

을 변경합니다. 지금은 다른 페이지로 검색 할 수 있습니다 $_POST

출처

2016-12-07 18:16:39

HTML5 : 캔버스 이미지를 데이터베이스에 저장

답변

관련 문제