배경에 BPG를 설정하는 방법

BPG 이미지를 <div> 또는 <body> 배경으로 사용할 수 있습니까? background: url('bg.bpg');이 작동하지 않습니다.배경에 BPG를 설정하는 방법

.bpg 이미지를 <img> 태그로 표시 할 수있는 자바 스크립트 디코더가 있지만 <body> 배경으로 사용하고 싶습니다.

2015-01-22 user3041764

... 어떤 브라우저 에서요? 더 중요한 점은 * 모든 브라우저가 .bpg 파일을 현재 지원합니까? – GoBusto

하지만 bpg를 표시 할 수있는 자바 스크립트 디코더가 있습니다. – user3041764

나는 당신의 질문에 다음과 같이 언급했다. 스크립트가로드되지 않았거나 다른 곳에서 자바 스크립트가 실행되는 것을 방해하거나 자바 스크립트 코드에 버그가 있거나 버그가있을 수있다. 브라우저와 관련된 것. 가능한 한 많은 정보를 추가하십시오! – GoBusto

자바 스크립트 BPG 디코더는 원본 .bpg 파일을 ImageData 개체로 변환 한 다음 캔버스로 그릴 수 있습니다. 그래서 당신이해야 할 일은 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>

출처

2015-01-25 10:22:01 GoBusto

배경에 BPG를 설정하는 방법

답변

관련 문제