4

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

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

4

1 回答 1

12

Javascript BPG 解码器通过将源 .bpg 文件转换为ImageData对象来工作，然后可以将其绘制到画布上。因此，您需要做的就是将画布作为 PNG 数据字符串并将其设置为主体背景图像：

<!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>
于 2015-01-25T10:22:01.323 回答