Browse files

Strange change in behaviour in ctx.getImgData

  • Loading branch information...
1 parent 85fc2b5 commit cca5f25721ce68430b6df0e3e71528d06cf86ed6 @leegee committed Nov 1, 2012
Showing with 23 additions and 245 deletions.
  1. +5 −1 Demo/index.html
  2. +0 −232 Docs/index.html
  3. BIN Docs/pluck.wav
  4. BIN Docs/pluck_600x200_steelblue_white.png
  5. +18 −12 Source/PcmImage.js
View
6 Demo/index.html
@@ -194,7 +194,7 @@
class='pcmimg'
data-uri='pluck.wav'
data-step='64'
- data-overlayClr='steelblue'
+ data-overlayclr='steelblue'
></div>
</figure>
@@ -221,6 +221,7 @@
></div>
</figure>
+<!--
<figure>
<figcaption>
JavaScript with the <code>onCanvasLoaded</code> callback
@@ -241,8 +242,11 @@
</figcaption>
<div id='soundtest-gradient' style='background:pink;width:500px;height:100px;'></div>
</figure>
+-->
</div></article>
+
+
</section>
</body>
View
232 Docs/index.html
@@ -1,232 +0,0 @@
-<html lang='en'>
-<head>
- <title>PcmImage - A MooTools Plugin</title>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <meta charset="utf-8">
-
- <meta name="author" content="Lee Goddard (http://www.leegoddard.net/)" />
- <meta name="copyright" content="Copyright (c) 2011 Lee Goddard" />
- <meta name="description" content="PcmImage: a MooTools plugin to create a PCM graph image from a sound file using the Web Audio API"/>
- <meta name="keywords" content="pcm, graph, image, audio, wav, mp3, ogg, automatic, web audio api, audio, lee goddard, html5"/>
-
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.4/mootools-yui-compressed.js"></script>
-
- <script src="../Source/PcmImage.js"></script>
-
- <script>
- document.addEvent('domready', function(){
- new PcmImage( {
- element: document.id('soundtest-gradient'),
- uri: 'pluck.wav',
- strokeStyle: 'blue',
- onCanvasLoaded: function(){
- var gradient=this.cctx.createLinearGradient(0,0, 100, 0);
- gradient.addColorStop("0","magenta");
- gradient.addColorStop("0.5","blue");
- gradient.addColorStop("1.0","red");
- this.options.strokeStyle = gradient;
- }
- } );
- });
- </script>
-
- <style>
- .pcmimg {
- background: orange;
- color: white;
- width:500px;
- height:100px;
- border:1px solid black;
- }
-
- figure {
- width: auto;
- display: block;
- border-bottom: 4pt dotted gray;
- margin-bottom: 1em;
- padding-bottom: 1em;
- }
-
- figcaption {
- margin-bottom: 1em;
- }
-
- #pcm {
- display: block;
- margin-top: 50pt
- }
- article {
- padding: 1em
- }
- </style>
-
-</head>
-
-<body>
-
- <header>
- <h1>PcmImage.js</h1>
- </header>
-
- <section>
- <article>
-
- <heading>
- <h2>Soundfile PCM Wave Visualisation</h1>
- </heading>
-
- <p>
- This code produces PCM waveform graphs from any
- sound file supported by your WebAudio API-compatible browser.
- Currently, that does not include Mozilla.
- </p>
-
- <p>
- There are two ways to use the code: directly from JavaScript,
- or through HTML5 dataset attributes. In each case, the
- graphic is rendered on a canvas element, which is inserted
- into an element that is specified by name, reference, or
- in the DOM through specifiying a CSS class of <code>pcmimg</code>.
- </p>
-
- <p>
- The source is straight-forward and details events supported,
- though these are unncessary for basic operation.
- </p>
-
- <p>
- The <code>data-step</code> specifies the unit for stepping
- through the PCM data, default is 8. Variations are illustrated
- below.
- </p>
-
- <p>
- The <code>data-img</code> attribute, if set, causes
- the default <code>canvas</code> element to be replaced
- with an <code>img</code> element.
- </p>
-
- <p>
- Fuller docs are in the README.md file.
- </p>
-
-<figure>
- <figcaption>
- <p>HTML default, style from class:</p>
- <div><pre><code><xmp>
-<style>
- .pcmimg {
- background: orange;
- color: white;
- width:500px;
- height:100px;
- border:1px solid black
- }
-</style>
-<div class='pcmimg'
- data-uri='pluck.wav'
-></div>
- </xmp></code></pre></div>
- </figcaption>
-
- <div id='soundtest3'
- data-uri='pluck.wav'
- class='pcmimg'
- ></div>
-</figure>
-
-<figure>
- <figcaption>HTML with style attribute</figcaption>
- <div id='soundtest4'
- data-uri='pluck.wav'
- data-asimg=true
- class='pcmimg'
- style='width:600;height:200;background:steelblue'
- ></div>
-</figure>
-
-<figure>
- <figcaption>HTML with data-step=1</figcaption>
- <div id='soundtest6'
- class='pcmimg'
- data-uri='pluck.wav'
- data-step='1'
- ></div>
-</figure>
-
-<figure>
- <figcaption>HTML with data-step=32</figcaption>
- <div id='soundtest6'
- class='pcmimg'
- data-uri='pluck.wav'
- data-step='32'
- ></div>
-</figure>
-
-<figure>
- <figcaption>HTML with data-step=64</figcaption>
- <div id='soundtest6'
- class='pcmimg'
- data-uri='pluck.wav'
- data-step='64'
- ></div>
-</figure>
-
-<figure>
- <figcaption>HTML with data-step=256</figcaption>
- <div id='soundtest6'
- class='pcmimg'
- data-uri='pluck.wav'
- data-step='256'
- ></div>
-</figure>
-
-<figure>
- <figcaption>HTML with data-step=128</figcaption>
- <div id='soundtest6'
- class='pcmimg'
- data-uri='pluck.wav'
- data-step='128'
- ></div>
-</figure>
-
-<figure>
- <figcaption>
- HTML with data-asImg=true,
- causing the <code>canvas</code> to be replaced by an <code>img</code>
- </figcaption>
- <div id='soundtest6'
- class='pcmimg'
- data-uri='pluck.wav'
- data-step='128'
- data-asImg='true'
- ></div>
-</figure>
-
-<figure>
- <figcaption>
- JavaScript with the <code>onCanvasLoaded</code> callback
- used to define a gradient for the <code>strokeStyle</code> option.s
- <div><pre><code>
- var mess = new PcmImage( {
- element: document.id('soundtest-gradient'),
- uri: 'pluck.wav',
- onCanvasLoaded: function(){
- var gradient=this.cctx.createLinearGradient(0,0, this.canvas.width, 0);
- gradient.addColorStop("0","blue");
- gradient.addColorStop("0.5","magenta");
- gradient.addColorStop("1.0","red");
- this.options.strokeStyle = gradient;
- }
- } );</code>
- </pre>
- </figcaption>
- <div id='soundtest-gradient' style='background:pink;width:500px;height:100px;'></div>
-</figure>
-
-</div></article>
-</section>
-
-</body>
-</html>
-
View
BIN Docs/pluck.wav
Binary file not shown.
View
BIN Docs/pluck_600x200_steelblue_white.png
Deleted file not rendered
View
30 Source/PcmImage.js
@@ -287,32 +287,38 @@ var PcmImage = new Class({
this.overlayInterval = 50; // quater second update
var overlaySteps = ((this.buffer.duration*1000) / this.overlayInterval )-1;
- this.overlay.inc = this.width / overlaySteps;
- this.overlay.thisX = 0;
+ this.overlay.inc = parseInt( this.width / overlaySteps );
this.overlay.lastX = this.overlay.inc * -1;
- this.renderTimer = this.overlayImg.periodical( this.overlayInterval, this );
+ this.overlay.thisX = 0;
+ this.renderTimer = this.overlayImg.periodical(
+ this.overlayInterval,
+ this
+ );
},
overlayImg: function(){
- this.cctx.fillStyle = 'rgba( 0, 255, 255, 1)';
+ // this.cctx.fillStyle = 'rgba( 0, 255, 255, 1)';
this.overlay.lastX = this.overlay.thisX;
this.overlay.thisX += this.overlay.inc;
+
var imgd = this.cctx.getImageData(
this.overlay.lastX, 0,
this.overlay.thisX, this.canvas.height
);
- for (var i=0;i<imgd.data.length;i+=4){
- var update = 0;
- for (var p=0; p<3; p++){
- if (imgd.data[i+p] > 0) update ++;
- }
- if (update==3) {
- imgd.data[i] = this.overlay.fg.r;
+ var found=0;
+ for (var i=0; i < imgd.data.length; i+=4){
+ // var update = 0;
+ // for (var p=0; p<3; p++){
+ // if (imgd.data[i+p] > 0) update ++;
+ // }
+ // if (update==3) {
+ imgd.data[i] = this.overlay.fg.r;
imgd.data[i+1] = this.overlay.fg.g;
imgd.data[i+2] = this.overlay.fg.b;
- }
+ // }
}
+
this.cctx.putImageData(imgd, this.overlay.lastX, 0);
}
});

0 comments on commit cca5f25

Please sign in to comment.