From d530ec84514e432ba24ca6663c417621bafb75e3 Mon Sep 17 00:00:00 2001 From: Joshua Granick Date: Fri, 13 May 2016 15:38:40 -0700 Subject: [PATCH] HTML5 Image fixes --- lime/graphics/Image.hx | 13 ++- lime/graphics/ImageBuffer.hx | 1 + lime/graphics/utils/ImageCanvasUtil.hx | 144 +++++++++++++------------ 3 files changed, 84 insertions(+), 74 deletions(-) diff --git a/lime/graphics/Image.hx b/lime/graphics/Image.hx index 31ff47de8..ff24bbf6a 100644 --- a/lime/graphics/Image.hx +++ b/lime/graphics/Image.hx @@ -173,11 +173,18 @@ class Image { if (buffer != null) { #if (js && html5) - ImageCanvasUtil.sync (this, true); + if (type == CANVAS) { + + ImageCanvasUtil.convertToCanvas (this); + + } else { + + ImageCanvasUtil.convertToData (this); + + } #end var image = new Image (buffer.clone (), offsetX, offsetY, width, height, null, type); - image.dirty = dirty; image.version = version; return image; @@ -1525,7 +1532,7 @@ class Image { switch (type) { - case DATA: + case CANVAS, DATA: #if (js && html5) ImageCanvasUtil.convertToData (this); diff --git a/lime/graphics/ImageBuffer.hx b/lime/graphics/ImageBuffer.hx index 321e49097..f9dfb9601 100644 --- a/lime/graphics/ImageBuffer.hx +++ b/lime/graphics/ImageBuffer.hx @@ -12,6 +12,7 @@ import js.html.Image in HTMLImage; import js.html.ImageData; import js.html.Uint8ClampedArray; import js.Browser; +import lime.graphics.utils.ImageCanvasUtil; #elseif flash import flash.display.BitmapData; #end diff --git a/lime/graphics/utils/ImageCanvasUtil.hx b/lime/graphics/utils/ImageCanvasUtil.hx index e4743cd94..cb3451bee 100644 --- a/lime/graphics/utils/ImageCanvasUtil.hx +++ b/lime/graphics/utils/ImageCanvasUtil.hx @@ -30,10 +30,11 @@ class ImageCanvasUtil { } - public static function convertToCanvas (image:Image):Void { + public static function convertToCanvas (image:Image, clear:Bool = false):Void { var buffer = image.buffer; + #if (js && html5) if (buffer.__srcImage != null) { if (buffer.__srcCanvas == null) { @@ -45,7 +46,7 @@ class ImageCanvasUtil { buffer.__srcImage = null; - } else if (buffer.data != null && buffer.__srcCanvas == null) { + } else if (buffer.__srcCanvas == null && buffer.data != null) { image.transparent = true; createCanvas (image, buffer.width, buffer.height); @@ -53,45 +54,83 @@ class ImageCanvasUtil { buffer.__srcContext.putImageData (buffer.__srcImageData, 0, 0); - } else if (buffer.data == null && buffer.__srcImageData != null) { + } else { - buffer.data = cast buffer.__srcImageData.data; + + + if (image.type == DATA && buffer.__srcImageData != null && image.dirty) { + + buffer.__srcContext.putImageData (buffer.__srcImageData, 0, 0); + image.dirty = false; + + } } - if (image.type == CANVAS) { + if (clear) { - image.dirty = false; + buffer.data = null; + buffer.__srcImageData = null; } else { - image.type = CANVAS; - - sync (image, false); + if (buffer.data == null && buffer.__srcImageData != null) { + + buffer.data = cast buffer.__srcImageData.data; + + } } + #end + + image.type = CANVAS; } - public static function convertToData (image:Image):Void { + public static function convertToData (image:Image, clear:Bool = false):Void { + + var buffer = image.buffer; #if (js && html5) - if (image.buffer.data == null) { + if (buffer.__srcImage != null) { convertToCanvas (image); - image.type = DATA; - image.dirty = true; - } else if (image.type == DATA) { + } + + if (buffer.__srcCanvas != null && buffer.data == null) { + + createImageData (image); + if (image.type == CANVAS) image.dirty = false; + + } else if (image.type == CANVAS && buffer.__srcCanvas != null && image.dirty) { + + if (buffer.__srcImageData == null) { + + createImageData (image); + + } else { + + buffer.__srcImageData = buffer.__srcContext.getImageData (0, 0, buffer.width, buffer.height); + buffer.data = new UInt8Array (cast buffer.__srcImageData.data.buffer); + + } image.dirty = false; } - sync (image, false); + if (clear) { + + image.buffer.__srcCanvas = null; + image.buffer.__srcContext = null; + + } #end + image.type = DATA; + } @@ -125,7 +164,7 @@ class ImageCanvasUtil { } - sync (image, true); + convertToCanvas (image, true); if (!mergeAlpha) { @@ -137,7 +176,7 @@ class ImageCanvasUtil { } - sync (sourceImage, false); + convertToCanvas (sourceImage); if (sourceImage.buffer.src != null) { @@ -215,18 +254,6 @@ class ImageCanvasUtil { public static function fillRect (image:Image, rect:Rectangle, color:Int, format:PixelFormat):Void { convertToCanvas (image); - sync (image, true); - - if (rect.x == 0 && rect.y == 0 && rect.width == image.width && rect.height == image.height) { - - if (image.transparent && ((color & 0xFF) == 0)) { - - image.buffer.__srcCanvas.width = image.buffer.width; - return; - - } - - } var r, g, b, a; @@ -246,6 +273,17 @@ class ImageCanvasUtil { } + if (rect.x == 0 && rect.y == 0 && rect.width == image.width && rect.height == image.height) { + + if (image.transparent && a == 0) { + + image.buffer.__srcCanvas.width = image.buffer.width; + return; + + } + + } + image.buffer.__srcContext.fillStyle = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + (a / 255) + ')'; image.buffer.__srcContext.fillRect (rect.x + image.offsetX, rect.y + image.offsetY, rect.width + image.offsetX, rect.height + image.offsetY); @@ -312,7 +350,7 @@ class ImageCanvasUtil { } else { - sync (image, true); + convertToCanvas (image, true); var sourceCanvas = buffer.__srcCanvas; buffer.__srcCanvas = null; createCanvas (image, newWidth, newHeight); @@ -333,8 +371,7 @@ class ImageCanvasUtil { if ((x % image.width == 0) && (y % image.height == 0)) return; - convertToCanvas (image); - sync (image, true); + convertToCanvas (image, true); image.buffer.__srcContext.clearRect (x, y, image.width, image.height); image.buffer.__srcContext.drawImage (image.buffer.__srcCanvas, x, y); @@ -375,48 +412,13 @@ class ImageCanvasUtil { public static function sync (image:Image, clear:Bool):Void { #if (js && html5) - if (image.dirty) { + if (image.type == CANVAS) { - var buffer = image.buffer; + convertToCanvas (image, clear); - if (buffer.__srcImageData != null && image.type != DATA) { - - buffer.__srcContext.putImageData (buffer.__srcImageData, 0, 0); - buffer.data = null; - image.dirty = false; - - image.type = CANVAS; - - if (clear) { - - buffer.__srcImageData = null; - buffer.data = null; - - } - - } else if (buffer.__srcContext != null && image.type == DATA) { - - if (buffer.__srcImageData == null) { - - createImageData (image); - - } else { - - buffer.__srcImageData = buffer.__srcContext.getImageData (0, 0, buffer.width, buffer.height); - buffer.data = new UInt8Array (cast buffer.__srcImageData.data.buffer); - - } - - if (clear) { - - buffer.__srcCanvas = null; - buffer.__srcContext = null; - - } - - } + } else { - image.dirty = false; + convertToData (image, clear); } #end