gpt4 book ai didi

javascript - 有办法将这些代码组合在一起吗?

转载 作者:太空宇宙 更新时间:2023-11-04 15:55:55 27 4
gpt4 key购买 nike

我正在建立一个项目,简单地说,用户发送图像(上传),它会立即显示在屏幕上,并且其主要颜色显示在特定的 div 中。

我已经准备好代码并可以运行,但它是分开的;一个代码/脚本负责发送和显示图像,另一个代码/脚本负责检测颜色,但检测的是已插入文档中的图像。我找不到将它们结合在一起使其发挥作用的逻辑,正如我在一开始所说的那样......

可能吗?

这是在线演示: http://simulaplayer.esy.es/demo/

这是查看源代码:

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

/* Image upload and preview: */

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

/* Picks the main color of the image */

<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>
</body>

*(对不起,我的英语,我不太懂。)

最佳答案

在获取图像的主色之前,您必须将base64 dataURL转换为图像。参见https://jsfiddle.net/feexon/w1dty7yj请。并且您在图像文件更改后从未调用过获取图像的主颜色。

var image=new Image();
image.src=reader.result
imageChanged(image);

关于javascript - 有办法将这些代码组合在一起吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42708757/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com