gpt4 book ai didi

javascript - 如何在后台设置 BPG

转载 作者:技术小花猫 更新时间:2023-10-29 11:49:57 26 4
gpt4 key购买 nike

我可以使用 BPG 吗?图片为 <div><body>背景? background: url('bg.bpg');不起作用。

有一个 Javascript 解码器允许 .bpg 图像显示在 <img> 中。标签,但我想使用一个作为 <body>背景。

最佳答案

Javascript BPG 解码器通过将源 .bpg 文件转换为 ImageData 来工作。对象,然后可以将其绘制到 Canvas 上。所以你需要做的就是get the canvas as a PNG data string并将其设置为正文背景图片:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BPG background example.</title>
<!-- Decoder script from http://bellard.org/bpg/ -->
<script src="bpgdec8a.js"></script>
<script>
"use strict";

function setBackground(filename)
{

// Create a hidden canvas with the same dimensions as the image.
var canvas = document.createElement("canvas");
canvas.style.visibility = "hidden";
canvas.width = 512;
canvas.height = 512;
document.body.appendChild(canvas);

// Create a drawing context and a BPG decoder.
var ctx = canvas.getContext("2d");
var img = new BPGDecoder(ctx);

// Attempt to load the image.
img.onload = function()
{
// Once the image is ready, draw it to the canvas...
ctx.putImageData(this.imageData, 0, 0);
// ...and copy the canvas to the body background.
document.body.style.background = "url('" + canvas.toDataURL("image/png") + "')";
};
img.load(filename);

}
</script>
</head>
<body onload="setBackground('lena512color.bpg');">
<p>Hello, World!</p>
</body>
</html>

关于javascript - 如何在后台设置 BPG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28088036/

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