Skip to content

Add browser compatible API #929

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.

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

Merged
merged 3 commits into from
Jul 9, 2017
Merged

Add browser compatible API #929

merged 3 commits into from
Jul 9, 2017

Conversation

LinusU
Copy link
Collaborator

@LinusU LinusU commented Jun 24, 2017

This PR modifies the API to a few wrapper functions that are provided both for Node.js and the browser. Using a tool like browserify it should be easy to write code that works both on the backend and the frontend 🙌

ref: #833

package.json Outdated
@@ -29,6 +30,7 @@
"test-server": "node test/server.js"
},
"dependencies": {
"assert-rejects": "^0.1.1",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

meant to be a devDependency?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great catch!

case 0: return new ImageData()
case 1: return new ImageData(array)
case 2: return new ImageData(array, width)
default: return new ImageData(array, width, height)
Copy link
Collaborator

@zbjornson zbjornson Jun 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do cases 0 and 1 exist? MDN only documents new ImageData(arr, w, h) and ImageData(w, h).

Also, would this be the same as return new ImageData(...arguments)? EDIT: (Or what you have in index.js, where you're just passing three args, and height may be undefined.)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

0 and 1 doesn't exist, I added them to get the errors reported back to be accurate.

screen shot 2017-06-24 at 21 31 52

return new ImageData(...arguments) would be perfect, but unfortunately Node.js 4.x doesn't support it... It's doing this since passing (10, 10, undefined) doesn't do what you want it to in the browsers:

screen shot 2017-06-24 at 21 33 28

Not 100% sure that this is the best approach though 🤔

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, clever :) and now I understand what your comment means.

@LinusU LinusU merged commit 41af8c0 into Automattic:master Jul 9, 2017
@LinusU LinusU deleted the browser branch July 9, 2017 15:45
@zbjornson
Copy link
Collaborator

@LinusU I started playing more with this and realized one thing to consider changing. This PR hid the ImageData constructor, so you can't do xx instanceof ImageData or new ImageData(...) anymore, for example. Browsers provide ImageData, so I think it should still be exposed.

@zbjornson
Copy link
Collaborator

zbjornson commented Jul 11, 2017

Actually, a lot of stuff got hidden...

> /* 2.0 */ Canvas.
[inherited from Object, snip]

Canvas.createCanvas          Canvas.createImageData       Canvas.loadImage             Canvas.parseFont
> /* 1.6 */ Canvas.
[inherited from Object, snip]

[inherited from Function, snip]

Canvas.Context2d             Canvas.Image                 Canvas.ImageData             Canvas.JPEGStream
Canvas.PNGStream             Canvas.cairoVersion          Canvas.prototype             Canvas.version

// 2.0 pre-this PR also had Canvas.backends

The constructors are useful at least for instanceof (although Context2d should be CanvasRenderingContext2d), and cairoVersion/version have their merits as well. Maybe go back to exposing all of those, and just additionally export the create* and loadImage functions?


Sounds like that was the intent actually:

I want to keep new Image() since that does indeed work in the browser.


Edit 3: Plus exposing all the original constructors means that all of the examples and benchmarks won't need to be updated, and legacy code will continue to work :)

zbjornson added a commit to zbjornson/node-canvas that referenced this pull request Jul 19, 2017
zbjornson added a commit to zbjornson/node-canvas that referenced this pull request Aug 27, 2017
zbjornson added a commit to zbjornson/node-canvas that referenced this pull request Aug 27, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants