在进行javascript编程时，我试图通过将需要隐藏的图片的前四位颜色值变为显示的图片的后四位颜色值，存储图片的信息的同时隐藏图片，我在融合图片时，却发现并没有达成颜色色调只有轻微的改动的效果，反而将整张图片变成了类似彩虹色的模块，请问可以帮我解答一下吗.
```html
<script src="https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js">
</script>
<h1> hideimage </h1>
<canvas id="imagecanvas">
</canvas>
<canvas id="show1">
</canvas>
<canvas id="show2">
</canvas>
<p>upload image to hide<input type="file" multiple="false" accept="image/*" id="uploadhide" onchange="HideUpload()"></p>
<p>upload image that is shown<input type="file" multiple="false" accept="image/*" id="uploadshown" onchange="ShownUpload()"></p>
<input type="button" value="Combine Images" onclick="combineImages()">
<input type="button" value="Test Steganography" onclick="testSteganography()">
<!-- The following div will be used to display the extracted hidden data -->
<div>
<h2>Extracted Hidden Data</h2>
<canvas id="extracted-canvas"></canvas>
</div>
<input type="button" value="Extract and Display Data" onclick="extractAndDisplayData()">
```javascript
var width = 100;
var height = 100;
var hideimg;
var showimg;
var finalimg = new SimpleImage(width,height);
function HideUpload(){
var imgFile1 = document.getElementById("uploadhide")
hideimg = new SimpleImage(imgFile1);
var canvas = document.getElementById("show1");
hideimg.drawTo(canvas)
}
function ShownUpload()
{
var imgFile2 = document.getElementById("uploadshown")
showimg = new SimpleImage(imgFile2);
var canvas = document.getElementById("show2");
showimg.drawTo(canvas)
}
function changelength(showimg, hideimg)
{
if(showimg.height >= hideimg.height)
{
showimg.height = hideimg.height;
}
if(showimg.width >= hideimg.width)
{
showimg.width = hideimg.width;
}
}
function clearbits(colorval){
var x = Math.floor(colorval/16) * 16;
return x
}
function clearbefore(colorval){
var x = (colorval % 16) * 16 ;
return x;
}
function combine(show,hide){
var answer = new SimpleImage(show.getWidth(), show.getHeight());
for (var px of answer.values())
{
var x = px.getX();
var y = px.getY();
var showPixel = show.getPixel(x,y);
var hidePixel = hide.getPixel(x,y);
px.setRed(clearbefore(showPixel.getRed()) | clearbits(hidePixel.getRed()));
px.setGreen(clearbefore(showPixel.getGreen()) | clearbits(hidePixel.getGreen()));
px.setBlue(showPixel.getBlue()| clearbits(hidePixel.getBlue()));
}
return answer;
}
function combineImages() {
if (hideimg && showimg) {
changelength(showimg,hideimg)
finalimg = combine(showimg, hideimg);
var canvas = document.getElementById("imagecanvas");
finalimg.drawTo(canvas)
} else {
alert("Please upload both images before combining.");
}
}
function extractHiddenData(combinedImage) {
var hiddenDataImage = new SimpleImage(combinedImage.getWidth(), combinedImage.getHeight());
for (var px of combinedImage.values()) {
var x = px.getX();
var y = px.getY();
var red = px.getRed() & 0x0F
var green = px.getGreen() & 0x0F
var blue = px.getBlue() & 0x0F
var hiddenPixel = hiddenDataImage.getPixel(x, y);
hiddenPixel.setRed(red * 16);
hiddenPixel.setGreen(green * 16);
hiddenPixel.setBlue(blue * 16);
}
return hiddenDataImage;
}
function extractAndDisplayData() {
if (hideimg && showimg && hideimg.getWidth() === showimg.getWidth() && hideimg.getHeight() === showimg.getHeight()) {
var combinedImage = combine(hideimg, showimg);
var hiddenDataImage = extractHiddenData(combinedImage);
var extractedCanvas = document.getElementById("extracted-canvas");
extractedCanvas.width = hiddenDataImage.getWidth();
extractedCanvas.height = hiddenDataImage.getHeight();
hiddenDataImage.drawTo(extractedCanvas);
} else {
alert("Please upload both images of the same dimensions before extracting and displaying the hidden data.");
}
}
for(let i=100000;i<1000000;i++){
let num = (i-7)/10+700000;
if(num/i==4){
console.log(i);
}
}