kiss-lang/lime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HTML5 Image fixes

Browse Source
This commit is contained in:
Joshua Granick
2016-05-13 15:38:40 -07:00
parent 7009358d25
commit d530ec8451
3 changed files with 84 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
lime/graphics/Image.hx
View File

@@ -173,11 +173,18 @@ class Image {
if (buffer != null) { if (buffer != null) {
#if (js && html5) #if (js && html5)
ImageCanvasUtil.sync (this, true); if (type == CANVAS) {
ImageCanvasUtil.convertToCanvas (this);
} else {
ImageCanvasUtil.convertToData (this);
}
#end #end
var image = new Image (buffer.clone (), offsetX, offsetY, width, height, null, type); var image = new Image (buffer.clone (), offsetX, offsetY, width, height, null, type);
image.dirty = dirty;
image.version = version; image.version = version;
return image; return image;
@@ -1525,7 +1532,7 @@ class Image {
switch (type) { switch (type) {
case DATA: case CANVAS, DATA:
#if (js && html5) #if (js && html5)
ImageCanvasUtil.convertToData (this); ImageCanvasUtil.convertToData (this);

1
lime/graphics/ImageBuffer.hx
View File

@@ -12,6 +12,7 @@ import js.html.Image in HTMLImage;
import js.html.ImageData; import js.html.ImageData;
import js.html.Uint8ClampedArray; import js.html.Uint8ClampedArray;
import js.Browser; import js.Browser;
import lime.graphics.utils.ImageCanvasUtil;
#elseif flash #elseif flash
import flash.display.BitmapData; import flash.display.BitmapData;
#end #end

144
lime/graphics/utils/ImageCanvasUtil.hx
View File

@@ -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; var buffer = image.buffer;
#if (js && html5)
if (buffer.__srcImage != null) { if (buffer.__srcImage != null) {
if (buffer.__srcCanvas == null) { if (buffer.__srcCanvas == null) {
@@ -45,7 +46,7 @@ class ImageCanvasUtil {
buffer.__srcImage = null; buffer.__srcImage = null;
} else if (buffer.data != null && buffer.__srcCanvas == null) { } else if (buffer.__srcCanvas == null && buffer.data != null) {
image.transparent = true; image.transparent = true;
createCanvas (image, buffer.width, buffer.height); createCanvas (image, buffer.width, buffer.height);
@@ -53,45 +54,83 @@ class ImageCanvasUtil {
buffer.__srcContext.putImageData (buffer.__srcImageData, 0, 0); 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 { } else {
image.type = CANVAS; if (buffer.data == null && buffer.__srcImageData != null) {
sync (image, false); 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 (js && html5)
if (image.buffer.data == null) { if (buffer.__srcImage != null) {
convertToCanvas (image); 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; image.dirty = false;
} }
sync (image, false); if (clear) {
image.buffer.__srcCanvas = null;
image.buffer.__srcContext = null;
}
#end #end
image.type = DATA;
} }
@@ -125,7 +164,7 @@ class ImageCanvasUtil {
} }
sync (image, true); convertToCanvas (image, true);
if (!mergeAlpha) { if (!mergeAlpha) {
@@ -137,7 +176,7 @@ class ImageCanvasUtil {
} }
sync (sourceImage, false); convertToCanvas (sourceImage);
if (sourceImage.buffer.src != null) { if (sourceImage.buffer.src != null) {
@@ -215,18 +254,6 @@ class ImageCanvasUtil {
public static function fillRect (image:Image, rect:Rectangle, color:Int, format:PixelFormat):Void { public static function fillRect (image:Image, rect:Rectangle, color:Int, format:PixelFormat):Void {
convertToCanvas (image); 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; 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.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); 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 { } else {
sync (image, true); convertToCanvas (image, true);
var sourceCanvas = buffer.__srcCanvas; var sourceCanvas = buffer.__srcCanvas;
buffer.__srcCanvas = null; buffer.__srcCanvas = null;
createCanvas (image, newWidth, newHeight); createCanvas (image, newWidth, newHeight);
@@ -333,8 +371,7 @@ class ImageCanvasUtil {
if ((x % image.width == 0) && (y % image.height == 0)) return; if ((x % image.width == 0) && (y % image.height == 0)) return;
convertToCanvas (image); convertToCanvas (image, true);
sync (image, true);
image.buffer.__srcContext.clearRect (x, y, image.width, image.height); image.buffer.__srcContext.clearRect (x, y, image.width, image.height);
image.buffer.__srcContext.drawImage (image.buffer.__srcCanvas, x, y); image.buffer.__srcContext.drawImage (image.buffer.__srcCanvas, x, y);
@@ -375,48 +412,13 @@ class ImageCanvasUtil {
public static function sync (image:Image, clear:Bool):Void { public static function sync (image:Image, clear:Bool):Void {
#if (js && html5) #if (js && html5)
if (image.dirty) { if (image.type == CANVAS) {
var buffer = image.buffer; convertToCanvas (image, clear);
if (buffer.__srcImageData != null && image.type != DATA) { } else {
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;
}
}
image.dirty = false; convertToData (image, clear);
} }
#end #end