| import 'dart:html'; |
| import 'dart:async'; |
| import 'dart:html' as prefix0; |
| import 'dart:typed_data'; |
| import 'package:image/image.dart'; |
| |
| /// Decode and display various image formats. This is used as a visual |
| /// unit-test to identify problems that may occur after the translation to |
| /// javascript. |
| void main() { |
| // An img on the html page is used to establish the path to the images |
| // directory. It's removed after we get the path since we'll be populating |
| // the page with our own decoded images. |
| var img = querySelectorAll('img')[0] as prefix0.ImageElement; |
| String path = img.src.substring(0, img.src.lastIndexOf('/')); |
| img.remove(); |
| |
| // The list of images we'll be decoding, representing a wide range |
| // of formats and sub-formats. |
| List<String> images = [ |
| 'penguins.jpg', |
| '1_webp_ll.webp', |
| '1.webp', |
| '3_webp_a.webp', |
| 'puppies.jpg', |
| 'cars.gif', |
| 'trees.png', |
| 'animated.png', |
| 'BladeRunner_lossy.webp' |
| ]; |
| |
| for (String name in images) { |
| // Use an http request to get the image file from disk. |
| var req = HttpRequest(); |
| req.open('GET', path + '/' + name); |
| req.responseType = 'arraybuffer'; |
| req.onLoadEnd.listen((e) { |
| if (req.status == 200) { |
| // Convert the text to binary byte list. |
| List<int> bytes = Uint8List.view(req.response as ByteBuffer); |
| |
| var label = DivElement(); |
| document.body.append(label); |
| label.text = name; |
| |
| // Create a canvas to put our decoded image into. |
| var c = CanvasElement(); |
| document.body.append(c); |
| |
| // Find the best decoder for the image. |
| Decoder decoder = findDecoderForData(bytes); |
| if (decoder == null) { |
| return; |
| } |
| |
| // Some of the files are animated, so always decode to animation. |
| // Single image files will decode to a single framed animation. |
| Animation anim = decoder.decodeAnimation(bytes); |
| if (anim == null) { |
| return; |
| } |
| |
| // If it's a single image, dump the decoded image into the canvas. |
| if (anim.length == 1) { |
| Image image = anim.frames[0]; |
| |
| //Image newImage = copyResize(image, 2000, -1, CUBIC); |
| var newImage = image; |
| |
| c.width = newImage.width; |
| c.height = newImage.height; |
| |
| // Create a buffer that the canvas can draw. |
| ImageData d = c.context2D.createImageData(c.width, c.height); |
| // Fill the buffer with our image data. |
| d.data.setRange(0, d.data.length, newImage.getBytes(format: Format.rgba)); |
| // Draw the buffer onto the canvas. |
| c.context2D.putImageData(d, 0, 0); |
| |
| return; |
| } |
| |
| // A multi-frame animation, use a timer to draw frames. |
| // TODO this is currently not using the timing information in the |
| // [Animation], and using a hard-coded delay instead. |
| |
| // Setup the canvas size to the size of the first image. |
| c.width = anim.frames[0].width; |
| c.height = anim.frames[0].height; |
| // Create a buffer that the canvas can draw. |
| ImageData d = c.context2D.createImageData(c.width, c.height); |
| |
| int frame = 0; |
| new Timer.periodic(new Duration(milliseconds: 40), (t) { |
| Image image = anim.frames[frame++]; |
| if (frame >= anim.numFrames) { |
| frame = 0; |
| } |
| |
| // Fill the buffer with our image data. |
| d.data.setRange(0, d.data.length, image.getBytes(format: Format.rgba)); |
| // Draw the buffer onto the canvas. |
| c.context2D.putImageData(d, 0, 0); |
| }); |
| } |
| }); |
| req.send(''); |
| } |
| } |