搜狗浏览器，对bmp图片，深度图片不显示问题的解决
程序员文章站
2022-05-25 19:50:57
...
本html可以直接实现上传bmp图片文件，在搜狗浏览器中显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.inputoutput {
float: left;
margin: 10px;
}
</style>
</head>
<body>
<h2>BMP图片显示</h2>
<div>
<div class="inputoutput">
<img id="imageSrc" alt="No Image" />
<div class="caption">imageSrc： <input type="file" id="file" name="file" /></div>
</div>
<div class="inputoutput">
图片展示：<img src="" id="img">
</div>
<div class="">
画布绘制结果： <canvas id="canvasOutput"></canvas>
</div>
</div>
<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let imgElement = document.getElementById("imageSrc");
let inputElement = document.getElementById("file");
inputElement.addEventListener("change", function(e) {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, true);
window.onload = function() {
var f = document.getElementById("file");
f.onchange = function() {
//获取文件对象
var file = this.files[0];
//使用fileReader对文件对象进行操作
var reader = new FileReader();
reader.readAsArrayBuffer(file);
console.log("打file的值", file);
let that = this
reader.onload = function() {
console.log("readAsArrayBuffer:", reader.result);
var data = new Uint8Array(reader.result);
console.log("打印Uint8Array的值", data);
var canvas = document.getElementById("canvasOutput");
var ctx = canvas.getContext("2d");
let img_w = data[18] + data[19] * 256 + data[20] * 1024 + data[21] * 2048;
let img_h = data[22] + data[23] * 256 + data[24] * 1024 + data[25] * 2048;
console.log('img_w:', img_w);
console.log('img_h:', img_h);
ctx.drawImage(imgElement, 0, 0, img_w, img_h);
var pixels = ctx.getImageData(0, 0, img_w, img_h);
var line = 0;
let rgb_un8 = new Uint8Array(img_w * img_h);
for (let idx = img_h - 1; idx >= 0; idx--) {
for (let idy = 0; idy < img_w; idy++) {
rgb_un8[idx * img_w + idy] = data[1078 + line * img_w + idy]
}
line++
}
for (var i = 0, j = 0; j < rgb_un8.length; j++, i += 4) {
pixels.data[i] = rgb_un8[j]
pixels.data[i + 1] = rgb_un8[j]
pixels.data[i + 2] = rgb_un8[j]
pixels.data[i + 3] = 255
}
console.log('data new:', rgb_un8);
ctx.putImageData(pixels, 0, 0); //更改像素点
console.log('pixels', pixels);
setTimeout(function() {
let imgElement = document.getElementById("img");
var dataURL = canvas.toDataURL("image/jpg");
imgElement.src = dataURL;
console.log('==dataURL=========', dataURL)
}, 500)
}
}
}
</script>
</body>
</html>
上一篇： vue 创建公共组件并引用
下一篇： vue父页面与子页面共同引用高德地图问题