admin管理员组

文章数量:1401774

Can I use a BPG image as a <div> or <body> background? background: url('bg.bpg'); doesn't work.

There is a Javascript decoder which allows .bpg images to be displayed in <img> tags, but I want to use one as a <body> background.

Can I use a BPG image as a <div> or <body> background? background: url('bg.bpg'); doesn't work.

There is a Javascript decoder which allows .bpg images to be displayed in <img> tags, but I want to use one as a <body> background.

  • javascript
  • html
  • css
  • background-image
  • bpg
Share Improve this question edited Jan 25, 2015 at 9:54 GoBusto 4,7886 gold badges31 silver badges46 bronze badges asked Jan 22, 2015 at 11:46 user3041764user3041764 8491 gold badge11 silver badges35 bronze badges 5
  • ...in which browser? More to the point, do any browsers support .bpg files at the moment? – GoBusto Commented Jan 22, 2015 at 11:48
  • But there is a javascript decoder which allows to display bpg. – user3041764 Commented Jan 22, 2015 at 11:53
  • I'd mention that in your question, then - it could be that the script isn't being loaded, or an error elsewhere is preventing the Javascript from running, or there could be a bug in the Javascript code, or it could be something browser-specific. Please add as much information as possible! – GoBusto Commented Jan 22, 2015 at 12:17
  • I am using standard example from bellard/bpg, it displays images properly, but I wouldn't display img but set img like a body background – user3041764 Commented Jan 22, 2015 at 12:27
  • 1 Please edit your question to include this information, rather than adding it in the ments - It helps more people to notice it. – GoBusto Commented Jan 22, 2015 at 12:41
Add a ment  | 

1 Answer 1

Reset to default 12

The Javascript BPG decoder works by converting the source .bpg file into an ImageData object, which can then be drawn to a canvas. So all you need to do is get the canvas as a PNG data string and set that as the body background image:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BPG background example.</title>
        <!-- Decoder script from http://bellard/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>

本文标签： javascriptHow to set BPG on backgroundStack Overflow

版权声明：本文标题：javascript - How to set BPG on background - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744227577a2596168.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。