Tem uma forma de juntar esses códigos?
Olá, amigos.
Estou montando um projeto no qual, de forma limpa falando, o usuário envia uma imagem (upload), ela é exibida imediatamente na tela e sua cor predominante é exibida em uma div específica.
Já tenho o código pronto e funcionando, só que está de forma separada; um código/script cuida do enviar e mostrar a imagem e o outro detecta a cor, mas de uma imagem que já está inserida no documento. Eu não consigo achar uma lógica que junte-os para que funcione como falei no inicio...
Isso é possível?
Aqui a demonstração online:
E aqui o código fonte:
<head>
<script src="js/color-thief.js"></script>
<script src="js/jquery.js"></script>
<style type="text/css">
#mydiv {
width: 100px;
height: 100px;
border: 1px solid #000;
}
#clock{
background-image:url('');
background-size:cover;
background-position: center;
height: 250px; width: 250px;
border: 1px solid #bbb;
}
</style>
</head>
<body>/ O envio e visualização de imagem: /
<input type='file' id='getval' name="background-image" /><br/><br/>
<div id='clock'></div>
<script>
document.getElementById('getval').addEventListener('change', readURL, true);
function readURL(){
var file = document.getElementById("getval").files[0];
var reader = new FileReader();
reader.onloadend = function(){
document.getElementById('clock').style.backgroundImage = "url(" + reader.result + ")";
}
if(file){
reader.readAsDataURL(file);
}else{
}
}
</script>/ PEGA A COR PRINCIPAL DE UMA IMAGEM/
<img src="img/photo3.jpg" id="myimg" />
<div id="mydiv"></div>
<script>
$(window).ready(function(){
var sourceImage = document.getElementById("myimg");
var colorThief = new ColorThief();
var color = colorThief.getColor(sourceImage);
document.getElementById("mydiv").style.backgroundColor = "rgb(" + color + ")";
});
</script>
<hr />
</body>Discussão (1)
Carregando comentários...