прозрачный фон изображения html5 canvas - PullRequest
Новая
       18

прозрачный фон изображения html5 canvas

4 голосов
/ 17 марта 2012

Я вставляю изображение в свой холст следующим образом:

ctx.drawImage (myImageObject, 0, 0);

работает отлично, за исключением того, что вставляемое изображение содержит некоторые частикак прозрачный, а canvas, кажется, игнорирует это, и он просто печатает то, что должно быть прозрачным, в виде белых пикселей.

Вот изображение, которое я вставляю: http://i44.tinypic.com/25ymq.gif

Я исследовал эту проблему abitи некоторые люди исправили это, выполнив ctx.getImageData (0, 0, width, height) .data, а затем итерируя по этому массиву, заменяя пиксели вручную для прозрачности.Я также читал, что это плохая практика, потому что она медленная (и мои листы спрайтов могут быть 1000 x 1000, и поэтому это БЫЛО очень медленно).

Можно ли что-то сделать, чтобы сделать прозрачность в моем gif-шоувверх?Когда я сохраняю его в фотошопе и когда я смотрю на сам рисунок, я вижу прозрачность, но как только я прикрепляю его на холст, он перестает быть прозрачным.

edit : Iтолько что попробовал другой gif и прозрачность работает, но в приведенном выше это не может быть проблема с вышеупомянутым gif?

1 Ответ

2 голосов
/ 18 марта 2012

Прекрасно работает для меня с этим изображением и следующим кодом в последней бета-версии Firefox и Chrome на Mac. (За исключением того, что само изображение имеет несколько белых непрозрачных пикселей, которые можно увидеть, открыв их на темном фоне, например в Firefox.) 

<!DOCTYPE HTML> 
<html>
<head>
<script type="application/x-javascript">
var canvas, ctx;

function init() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");

  var size=500;
  ctx.fillStyle = 'yellow';
  ctx.beginPath();
  ctx.fillStyle = 'yellow';
  ctx.moveTo(0,0);
  ctx.lineTo(size,0);
  ctx.lineTo(size,size);
  ctx.lineTo(0,size);
  ctx.lineTo(0,0);
  ctx.stroke();
  ctx.fill();

  var img = document.getElementById("img");
  ctx.drawImage(img, 0, 0);
}
</script>


</head>


<body onload="init();">

  <canvas id="canvas" width="500" height="500"></canvas>

  <img id="img" src="test.gif" style="position:absolute; top:500px"></img>

</body>
</html>
...