-3
Can someone tell me how to work the save button? I want to put for when press the "save userbar" button, save in an image all the content that is in the div "userbar".
I tried using html2canvas but at the time you take the print, the images inside do not appear (although I did a test placing these images on the html2canvas website,).
Help me please
1
As you can see on the console, it has to do with cors, tries to put the images in the same address as 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>
<script src="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>
<div id="userbar">
<img id="changefita"class="fita" src="http://wf.mail.ru/wiki/images/1/1a/Challenge_strip_ny.png">
<img id="changeinsignia"class="insignia" src="http://wf.mail.ru/wiki/images/d/d1/Challenge_badge_ny.png">
<img id="changemarca"class="marca" src="http://wf.mail.ru/wiki/images/6/6f/Challenge_mark_03.png">
<img src="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>Browser other questions tagged javascript html css
You are not signed in. Login or sign up in order to post.
mannnn, it worked perfectly, thank you very much :D was already getting sad thinking q wouldn’t work. kkk even believe :D vlw msm
– War Night