如何在背景上設置BPG

Question

我可以將BPG圖像用作<div>或<body>背景嗎？ background: url('bg.bpg'); 不起作用。

有一個Javascript解碼器允許.bpg圖像顯示在<img>標簽中，但我想使用一個作為<body>背景。

Answer 1

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>

如何在背景上設置BPG

問題描述

1 個解決方案

解決方案1
12 2015-01-25 10:22:01

如何在背景上設置BPG

問題描述

1 個解決方案

解決方案1 12 2015-01-25 10:22:01

解決方案1
12 2015-01-25 10:22:01