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>`

app.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

Thanks

источник

2016-12-07 ooo-Ghost-ooo

Прошу прощения. но это проблема, я не знаю, как ее запустить. Я только начал изучать javascript. –

Сохранение базы данных (обычно) выполняется на сервере, поэтому оно не связано с JavaScript и требует наличия кода на стороне сервера. Если вы новичок в JavaScript, я бы рекомендовал попробовать что-то более простое, так как SO не является хорошим местом, чтобы задать такой вопрос. – fstanis

@ftanis, если я изменяю 'window.open (signaturePad.toDataURL());' to' window.open ("newpage.php? Image =" signaturePad.toDataURL()); 'и использовать' $ _GET ['image ']' и вставить его в базу данных, как вы думаете, он будет работать? –

Только что нашел ответ на этот вопрос. и я думаю, что должен ответить. другие люди могут иметь такую же проблему.

отправить DataURL на следующую страницу. я просто изменить код

из

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

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(); 

    } 
    });

просто добавили форму и скрытый ввод в JavaScript. теперь его можно найти на другой странице, используя $_POST

источник

2016-12-07 18:16:39

HTML5: сохранить изображение в холсте

ответ

Смежные вопросы