Can someone tell me how I can work the button to save? I want to put when to hit the "save userbar" button, save in an image all the content that is in the "userbar" div.
I tried to use the html2canvas but the time it takes to print, the images that are inside do not appear (although I did a test placing these images on the html2canvas website, and in the print the image came out).
Please help me
As you can see in the console, it has to do with cors , try to put the images in the same address that you are running the page.
$(document).ready(function() {
$('.nickname').click(function() {
var $text = $(this),
$input = $('<input class="input-nickname"type="text" />')
$text.hide()
.after($input);
$input.val($text.html()).show().focus()
.keypress(function(e) {
var key = e.which
if (key == 13) // enter key
{
$input.hide();
$text.html($input.val())
.show();
return false;
}
})
.focusout(function() {
$input.hide();
$text.show();
})
});
});
$(document).ready(function() {
$('#Salvar').click(() => {
html2canvas($("#userbar"), {
allowTaint: true,
logging: true,
taintTest: false,
onrendered: function(canvas) {
var image = canvas.toDataURL("image/png");
canvas.toBlob(function(blob) {
saveAs(blob, "image.png");
});
}
});
});
$('.nomeclan').click(function() {
var $text = $(this),
$input = $('<input class="input-nomeclan"type="text" />')
$text.hide()
.after($input);
$input.val($text.html()).show().focus()
.keypress(function(e) {
var key = e.which
if (key == 13) // enter key
{
$input.hide();
$text.html($input.val())
.show();
return false;
}
})
.focusout(function() {
$input.hide();
$text.show();
})
});
});.control-label .text-info { display:inline-block; }
#userbar {
width: 500px;
height: 99px;
background-color:transparent;
}
.nomeclan {
position: absolute;
color: #96969a;
font-size: 17pt;
margin-left: 165px;
margin-top: -84px;
font-family: Quantico;
}
.nickname {
position: absolute;
color: whitesmoke;
font-size: 22pt;
margin-left: 165px;
margin-top: -83px;
font-family: Quantico;
}
.patente {
position: absolute;
margin-top: -82px;
width: 52px;
margin-left: 103px;
}
.insignia {
position: absolute;
margin-left: -5px;
margin-top: -102px;
width: 100px;
height: 100px;
}
.marca {
position: absolute;
margin-left: -5px;
width: 100px;
height: 100px;
margin-top: -101px;
}
.fita {
position: relative;
height: 99px;
width: 500px;
margin-left: -3px;
}
.input-nickname {
border: none;
background-color: #00000047;
position: absolute;
margin-top: -77px;
margin-left: 164px;
height: 26px;
width: 300px;
font-size: 29px;
color: whitesmoke;
font-family: Quantico;
text-align: left;
}
.input-nomeclan {
border: none;
background-color: #00000000;
position: absolute;
margin-top: -82px;
margin-left: 165px;
height: 26px;
width: 300px;
font-size: 23px;
color: #96969a;
font-family: Quantico;
text-align: left;
}<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Quantico' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script></head><body><divid="userbar">
<img id="changefita"class="fita" src="http://wf.mail.ru/wiki/images/1/1a/Challenge_strip_ny.png"><imgid="changeinsignia"class="insignia" src="http://wf.mail.ru/wiki/images/d/d1/Challenge_badge_ny.png"><imgid="changemarca"class="marca" src="http://wf.mail.ru/wiki/images/6/6f/Challenge_mark_03.png"><imgsrc="https://warface.uol.com.br/imagens/conteudo/guia-do-jogo/patentes/trainee.png" class="patente" id="changeptt">
<span class="nomeclan">WarNight</span>
<br>
<br>
<span class="nickname">WarNight</span>
</div>
<button id="Salvar">Salvar userbar</button>
<select onchange="$('#changeptt').attr('src', this.options[this.selectedIndex].value);">
<option value="https://warface.uol.com.br/imagens/conteudo/guia-do-jogo/patentes/trainee.png" selected>Patente 1</option>
<option value="https://warface.uol.com.br/imagens/conteudo/guia-do-jogo/patentes/cadete-junior.png">Patente 2</option>
<option value="https://warface.uol.com.br/imagens/conteudo/guia-do-jogo/patentes/cadete.png">Patente 3</option>
</select>
<select onchange="$('#changefita').attr('src', this.options[this.selectedIndex].value);">
<option value="http://wf.mail.ru/wiki/images/1/1a/Challenge_strip_ny.png" selected>Fita 1</option>
<option value="http://wf.mail.ru/wiki/images/7/7f/Challenge_strip_ww2.png">Fita 2</option>
<option value="http://wf.mail.ru/wiki/images/5/54/Challenge_strip_01.png">Fita 3</option>
</select>
<select onchange="$('#changemarca').attr('src', this.options[this.selectedIndex].value);">
<option value="http://wf.mail.ru/wiki/images/6/6f/Challenge_mark_03.png" selected>Marca 1</option>
<option value="https://wf.mail.ru/wiki/images/e/ef/Challenge_mark_04.png">Marca 2</option>
<option value="https://wf.mail.ru/wiki/images/1/1a/Challenge_mark_05.png">Marca 3</option>
</select>
<select onchange="$('#changeinsignia').attr('src', this.options[this.selectedIndex].value);">
<option value="http://wf.mail.ru/wiki/images/d/d1/Challenge_badge_ny.png" selected>Marca 1</option>
<option value="http://wf.mail.ru/wiki/images/6/69/Challenge_badge_ww2.png">Marca 2</option>
<option value="http://wf.mail.ru/wiki/images/2/27/Challenge_badge_15.png">Marca 3</option>
</select>
<style>
</style>
</body>
</html>