Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Use ImageBitmap when possible #1131

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

[WIP] Use ImageBitmap when possible #1131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
40f8d62
Better encapsulate image loading
CendioOssman Aug 23, 2018
7a6d805
Use Uint8Array in Base64 decoding
CendioOssman Aug 24, 2018
8804b91
Use ImageBitmap when possible
CendioOssman Aug 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion core/base64.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export default {

/* Every four characters is 3 resulting numbers */
const resultLength = (dataLength >> 2) * 3 + Math.floor((dataLength % 4) / 1.5);
const result = new Array(resultLength);
const result = new Uint8Array(resultLength);

// Convert one by one.

Expand Down
43 changes: 26 additions & 17 deletions core/display.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,17 +360,36 @@ export default class Display {
return;
}

const img = new Image();
img.src = "data: " + mime + ";base64," + Base64.encode(arr);

this._renderQPush({
let a = {
'type': 'img',
'img': img,
'x': x,
'y': y,
'width': width,
'height': height
});
};

if (window.createImageBitmap) {
let blob = new Blob([arr], { type: mime });
createImageBitmap(blob)
.then((img) => {
a.img = img;
this._scanRenderQ();
});
} else {
const img = new Image();
img.src = "data: " + mime + ";base64," + Base64.encode(arr);
/* IE tends to set "complete" prematurely, so check dimensions */
if (img.complete && (img.width !== 0) && (img.height !== 0)) {
a.img = img;
} else {
img.addEventListener('load', () => {
a.img = img;
this._scanRenderQ();
});
}
}

this._renderQPush(a);
}

blitImage(x, y, width, height, arr, offset, fromQueue) {
Expand Down Expand Up @@ -469,13 +488,6 @@ export default class Display {
}
}

_resumeRenderQ() {
// "this" is the object that is ready, not the
// display object
this.removeEventListener('load', this._noVNCDisplay._resumeRenderQ);
this._noVNCDisplay._scanRenderQ();
}

_scanRenderQ() {
let ready = true;
while (ready && this._renderQ.length > 0) {
Expand All @@ -494,8 +506,7 @@ export default class Display {
this.blitImage(a.x, a.y, a.width, a.height, a.data, 0, true);
break;
case 'img':
/* IE tends to set "complete" prematurely, so check dimensions */
if (a.img.complete && (a.img.width !== 0) && (a.img.height !== 0)) {
if (a.img) {
if (a.img.width !== a.width || a.img.height !== a.height) {
Log.Error("Decoded image has incorrect dimensions. Got " +
a.img.width + "x" + a.img.height + ". Expected " +
Expand All @@ -504,8 +515,6 @@ export default class Display {
}
this.drawImage(a.img, a.x, a.y);
} else {
a.img._noVNCDisplay = this;
a.img.addEventListener('load', this._resumeRenderQ);
// We need to wait for this image to 'load'
// to keep things in-order
ready = false;
Expand Down
2 changes: 1 addition & 1 deletion tests/test.base64.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Base64 from '../core/base64.js';
describe('Base64 Tools', function () {
"use strict";

const BIN_ARR = new Array(256);
const BIN_ARR = new Uint8Array(256);
for (let i = 0; i < 256; i++) {
BIN_ARR[i] = i;
}
Expand Down
28 changes: 2 additions & 26 deletions tests/test.display.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,43 +343,19 @@ describe('Display/Canvas Helper', function () {
});

it('should wait until an image is loaded to attempt to draw it and the rest of the queue', function () {
const img = { complete: false, width: 4, height: 4, addEventListener: sinon.spy() };
display._renderQ = [{ type: 'img', x: 3, y: 4, width: 4, height: 4, img: img },
display._renderQ = [{ type: 'img', x: 3, y: 4, width: 4, height: 4 },
{ type: 'fill', x: 1, y: 2, width: 3, height: 4, color: 5 }];
display.drawImage = sinon.spy();
display.fillRect = sinon.spy();

display._scanRenderQ();
expect(display.drawImage).to.not.have.been.called;
expect(display.fillRect).to.not.have.been.called;
expect(img.addEventListener).to.have.been.calledOnce;

display._renderQ[0].img.complete = true;
display._renderQ[0].img = { width: 4, height: 4 };
display._scanRenderQ();
expect(display.drawImage).to.have.been.calledOnce;
expect(display.fillRect).to.have.been.calledOnce;
expect(img.addEventListener).to.have.been.calledOnce;
});

it('should wait if an image is incorrectly loaded', function () {
const img = { complete: true, width: 0, height: 0, addEventListener: sinon.spy() };
display._renderQ = [{ type: 'img', x: 3, y: 4, width: 4, height: 4, img: img },
{ type: 'fill', x: 1, y: 2, width: 3, height: 4, color: 5 }];
display.drawImage = sinon.spy();
display.fillRect = sinon.spy();

display._scanRenderQ();
expect(display.drawImage).to.not.have.been.called;
expect(display.fillRect).to.not.have.been.called;
expect(img.addEventListener).to.have.been.calledOnce;

display._renderQ[0].img.complete = true;
display._renderQ[0].img.width = 4;
display._renderQ[0].img.height = 4;
display._scanRenderQ();
expect(display.drawImage).to.have.been.calledOnce;
expect(display.fillRect).to.have.been.calledOnce;
expect(img.addEventListener).to.have.been.calledOnce;
});

it('should call callback when queue is flushed', function () {
Expand Down