imgix / js-core Goto Github PK
View Code? Open in Web Editor NEWA JavaScript client library for generating image URLs with imgix
Home Page: https://www.imgix.com
License: BSD 2-Clause "Simplified" License
A JavaScript client library for generating image URLs with imgix
Home Page: https://www.imgix.com
License: BSD 2-Clause "Simplified" License
Consider the following example:
http://client-gallery.imgix.net/test/0001 Sample.jpg
Source tools from the Imgix's webapp (as well as imgix-core-js) generates the following URL:
http://client-gallery.imgix.net/test/0001 Sample.jpg?s=39a9dc8b6b77986e5208da574ab5f8f2
... which returns Unauthorized
response
my logs are filled withβ
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
'host' argument is deprecated; use 'domains' instead.
but switch host
to domains
and you'll get this insteadβ
Error: ImgixClient must be passed a valid host
at new ImgixClient (/Users/daniel/Dev/nylon-juryrig/node_modules/imgix-core-js/dist/imgix-core-js.js:40:15)
at Object.s3 (/Users/daniel/Dev/nylon-juryrig/modules/transforms/imgix.js:18:14)
at imgix (/Users/daniel/Dev/nylon-juryrig/modules/transforms/imgix.js:88:27)
at transImgs (/Users/daniel/Dev/nylon-juryrig/modules/transforms/imgs.js:90:19)
at post (/Users/daniel/Dev/nylon-juryrig/modules/methods/post.js:284:7)
at <anonymous>
Before you submit:
Is your feature request related to a problem? Please describe.
When using ImgixClient._buildURL
in the development environment, I am having trouble with an error if the url contains http://localhost:3000.
> ImgixClient._buildURL('http://localhost:3000/path/to/image.png', { w: 400, h: 300 })
Uncaught:
Error: Domain must be passed in as fully-qualified domain name and should not include a protocol or any path element, i.e. "example.imgix.net".
at new ImgixClient (/frontend/node_modules/@imgix/js-core/dist/index.cjs.js:287:13)
at Function._buildURL (/frontend/node_modules/@imgix/js-core/dist/index.cjs.js:497:20)
Describe the solution you'd like
I think adding a regular expression in DOMAIN_REGEX
that allows localhost:${port}
would solve the problem.
Describe alternatives you've considered
I am not aware of an alternative.
If there is a way to work around this, I would appreciate it.
Additional context
I am checking with v3.3.0, but the latest version v3.6.0 seems to be the same.
Where the error occurs:
https://github.com/imgix/js-core/blob/v3.3.0/src/index.js#L31-L36
https://github.com/imgix/js-core/blob/v3.6.0/src/index.js#L31-L36
DOMAIN_REGEX
definition:
https://github.com/imgix/js-core/blob/v3.3.0/src/constants.js#L4
https://github.com/imgix/js-core/blob/v3.6.0/src/constants.js#L4
My actual environment uses vue-imgix
, which internally uses ImgixClient._buildURL
.
https://github.com/imgix/vue/blob/v2.9.0/src/plugins/vue-imgix/vue-imgix.ts#L47-L70
https://github.com/imgix/vue/blob/v2.9.0/src/plugins/vue-imgix/vue-imgix.ts#L76-L83
In my use case:
Thank you.
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.
Hi, I really like many features of Imgix. I am currently using Cloudinary, with a poor service and support only because of the upload feature.
I want to use Imgix to upload multiple images at the same time directly from my backend to Imgix, no s3, no webfolder, like I do on cloudinary.
Is that possible? Thanks!
I'm following the docs exactly yet I get two errors:
Uncaught TypeError: Cannot read property 'Base64' of undefined
Uncaught ReferenceError: ImgixClient is not defined
I'm including the library like this:
<script defer src='https://unpkg.com/[email protected]/dist/imgix-core-js.min.js'></script>
js-base64
had a bug where mocha
was added as a dependency, rather than a dev-dependency, see dankogai/js-base64#149.
This was fixed in 3.7.1, but cannot be used with this package, since it dependency is set to ~3.6.0
. I think it would be better to relax to ^3.6.0
, so minor updates can be included.
Sorry, to ask the question here, couldn't find a Gitter channel.
Instead of appending 64
on every single param, is there a way, or some global settings to encode all params in base 64 by default?
Hi guys,
I get arbitrary and wrong signature values when using 0.3.0), it works with 0.2.1 though - might be something to check out.
The quick setup documentation found here shows the following initialization snippet:
However, this doesn't match the latest api, which requires an object of named parameters, like so:
new ImgixClient({
host: 'https://brewpublik.imgix.net',
secureURLToken: '1ekdu9DlZNArO7Sk',
});
Took me a minute to figure out what I was doing wrong, but it'd be easy to fix. π»
Is your feature request related to a problem? Please describe.
I want to use variable quality images on our website, but I want to send lower quality images than the preset provided.
Describe the solution you'd like
I would like to be able to provide an object like this either when constructing the Client or when calling buildSrcSet:
{ 1: 45, 2: 30, 3: 20, 4: 15}
Describe alternatives you've considered
I've considered just copy pasting the Dist into my repo and editing the object. because it's pretty easy to spot in the dist.
Would like to use the library, but I can't make out what the license is.
have the fix for the renamed dependency in it.
When a non-fully-qualified URL is passed, we're currently not doing any encoding on it (pending #8). This should probably be updated to at least be compliant with the "reserved" section of IETF RFC 3986. I'm going to dig into the best way to handle this. Hopefully URI.js has something helpful built-in, I just have to see if that's the case.
@imgix/js-core does not work with latest stable Nuxt 3 version, as it uses an outdated version of ufo.
Multiple major versions of package ufo are being externalized. Picking latest version:
++ /home/projects/nuxt-starter-zucthe/node_modules/[email protected]
-- /home/projects/nuxt-starter-zucthe/node_modules/@imgix/js-core/node_modules/[email protected]
To Reproduce
https://stackblitz.com/edit/nuxt-starter-zucthe
Steps to reproduce the behaviour:
Expected behaviour
@imgix/js-core should not conflict with newer ufo versions.
Information:
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
These updates await pending status checks before automerging. Click on a checkbox to abort the branch automerge, and create a PR instead.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@babel/core
, @babel/preset-env
, @babel/register
)@semantic-release/commit-analyzer
, @semantic-release/github
, @semantic-release/npm
, @semantic-release/release-notes-generator
)These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.
.circleci/config.yml
node 5.1.0
cimg/node 20.2
.github/workflows/add-issue-to-project.yml
actions/add-to-project v0.5.0
.github/workflows/add-pr-to-project.yml
actions/add-to-project v0.5.0
package.json
js-base64 ~3.7.0
md5 ^2.2.1
ufo ^1.0.0
@babel/core 7.22.5
@babel/preset-env 7.22.5
@babel/register 7.22.5
@google/semantic-release-replace-plugin 1.2.0
@semantic-release/changelog 6.0.3
@semantic-release/commit-analyzer 9.0.2
@semantic-release/git 10.0.1
@semantic-release/github 8.1.0
@semantic-release/npm 9.0.2
@semantic-release/release-notes-generator 10.0.3
benchmark 2.1.4
esm 3.2.25
mocha 8.4.0
prettier 2.8.8
rollup 3.26.2
rollup-plugin-babel 4.4.0
rollup-plugin-commonjs 10.1.0
@rollup/plugin-node-resolve 15.1.0
rollup-plugin-uglify 6.0.4
sinon 15.1.0
tsd 0.28.1
typescript 5.1.3
uglify-js 3.17.4
Please provide the following information and someone from @imgix/imgix-sdk-team will respond to your issue shortly.
Before you submit:
Question
I'm using a web proxy source which I'm able to generate secure URLs using the token, and it works. But the original source requires an API_KEY
to be passed on the URL. The current method only signs the original URL which becomes the imgix URL encoded and appended an s
, leaving the API_KEY
in the open.
I was wondering if there is a way to actually encrypt the URL instead?
Please provide the following information and someone from @imgix/imgix-sdk-team will respond to your issue shortly.
Describe the bug
A fluid-width (i.e. srcset="url 100w, url2 116w, ..."
) srcset is returned even when a fixed height is set. This is probably not the right behaviour, since this results in the image changing dimensions/aspect ratio as the width of the img
or picture
element changes.
To Reproduce
const client = new ImgixClient({ domain: 'assets.imgix.net' });
client.buildSrcSet('/image.jpg', { h: 100 });
Expected behavior
A "DPR" srcset is generated.
Information:
Origin file name: "download copy #1-[mike].png"
S3 URL: https://s3-us-west-2.amazonaws.com/testBuck/download%20copy%20%231-%5Bmike%5D.png
ImgixClient.buildURL(fileName, params)
should return: "https://some-prefix.imgix.net/download%20copy%20%231-%5Bmike%5D.png?s=52dd73573bffb0948d49118f30ea9218
but the result is: https://some-prefix.imgix.net/download%20copy%20#1-%5Bmike%5D.png?s=12c9ae700d245a639334a2763c93c304
So, the result url is incorrect because of #
in the url and imgix return URI signature match failed.
I found that the problem is here:
https://github.com/imgix/imgix-core-js/blob/1.0.5/src/imgix-core-js.js#L65-L83
Hi,
I'm trying to setup my images with Imgix and I can't find how to setup the expires params correctly with the lib.
My code looks like this
const in5min = new Date(new Date().getTime() + 5 * 60 * 1000).getTime();
var srcSet = client.buildSrcSet(
"img.png",
{
w: 720,
h: 120,
expires: in5min,
auto: "compress",
},
{ maxWidth: 1000 }
);
The generated urls looks like this:
https://XXXX.imgix.net/img.png?ixlib=js-2.3.2&w=2000&expires=1606291871320&auto=compress&dpr=5&q=20&s=91a2d83ca17c26b4a880e0366f7447a4
And I can visit the path after the date specified in the expires params, it still works.
Any way to fix this?
Thanks!
Before you submit:
Question
It's not immediately clear whether Management Rest APIs are supported by this library js-core
or will they be available in the future. Can you please share your roadmaps/future plans? Of course, we can write low-level REST API calls with fetch()
, but having an official client library would definitely increase adoption in the React, Node.js dev community.
Would it be possible to get some typescript typings for this package, either in the repo or on definitely typed?
The buildURL
and buildSrcSet
functions should URL encode the values of any query parameters except when a base64 parameter is used.
Example:
import ImgixClient from '@imgix/js-core';
let ub = new ImgixClient({
domain: 'assets.imgix.net',
})
console.log(
ub.buildURL(
"unsplash/walrus.jpg",
{
txt: "test!(')",
"txt-color": "000",
"txt-size": 400,
"txt-font": "Avenir-Black",
"txt-x": 800,
"txt-y": 600
}
)
);
Expected:
https://assets.imgix.net/unsplash/walrus.jpg?txt=test!(%27)&txt-color=000&txt-size=400&txt-font=Avenir-Black&txt-x=800&txt-y=600
Actual:
https://assets.imgix.net/unsplash/walrus.jpg?txt=test!(')&txt-color=000&txt-size=400&txt-font=Avenir-Black&txt-x=800&txt-y=600
Consider the following example:
var ImgixClient = require('imgix-core-js');
var client = new ImgixClient({
host: "example.com",
secureURLToken: "12345abcde",
secure: true
});
var url = client.buildURL("/a/b/c/image with spaces.jpg", {
fm: 'jpg',
dpr: 2,
w: 1500,
sharp: 15
});
The above outputs: https://example.com/a/b/c/image with spaces.jpg?fm=jpg&dpr=2&w=1500&sharp=15&ixlib=js-1.0.7&s=5d03453c163fb3c22722a1b7d3fc874a
when tool from web app outputs spaces URL encoded.
Request to the resulting URL returns 403 Invalid Signature. I needed to pin imgix-core-js version to 1.0.5 to avoid this.
π―
Based on the readme the host
setting is deprecated in favour of the domains
setting. The latest version of this package on npm will throw an error if the host
is not provided. Ideally changes like this, including to the readme, would be made in feature branches and pulled into master as part of a release to avoid confusion.
The readme claims es-module support, but currently I get an error when trying to bundle with rollup.
src/app.js β dist/app.js...
[!] Error: 'default' is not exported by node_modules/imgix-core-js/dist/imgix-core-js.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
Please provide the following information and someone from @imgix/imgix-sdk-team will respond to your issue shortly.
Describe the bug
In the logic used to build the srcset url, the source code assigns extra keys to the "imgix params" object passed to it by the caller.
To Reproduce
An example to illustrate the problem, although other possible combinations will exist.
const Imgix = require("imgix-core-js")
const client = new Imgix({
domain: 'test.imgix.net'
});
const params = {}
const srcsetOptions = { widths: [100] }
const url1 = client.buildSrcSet('', params, srcsetOptions);
const url2 = client.buildSrcSet('', params, srcsetOptions);
console.log(params, url1, url2)
It can clearly be seen in the screenshot above that params has been mutated. This causes the two urls generated to be different even though they were called with the same parameters.
Repro here: https://runkit.com/frederickfogerty/5f3e2c640856920019d6bfd8
Expected behavior
params
and other parameters to not be mutated
Screenshots
If applicable, add screenshots to help explain your problem.
Information:
Additional context
I think the entirety of imgix-core-js should be audited for this problem. I have found the following errors in the source code, but there might be more.
https://github.com/imgix/imgix-core-js/blob/main/src/imgix-core-js.js#L111
https://github.com/imgix/imgix-core-js/blob/main/src/imgix-core-js.js#L179
https://github.com/imgix/imgix-core-js/blob/main/src/imgix-core-js.js#L199
https://github.com/imgix/imgix-core-js/blob/main/src/imgix-core-js.js#L202
Hello team,
My company and I want to cap DPR src-set generated by buildSrcSet
function. We just need 1x and 2x to reduce DOM size and dowloaded image on mobile.
I think we can have an option maxDPR
to cap srcet generation.
Example :
{
maxDPR: 2
}
Or maybe make targetRatios
configurable with option inside the _buildDPRSrcSet fonction.
Example :
{
targetRatios: [1, 2]
}
Hello team,
All my company's projects that use Imgix are written in typescript.
Before, we use react-imgix with @types/react-imgix.
In @types/react-imgix
there are type for all Imgix Params types. Not pretty but it's good for IDE autocompletation and help very much my team.
What do you think about port the types of imgixParams
to js-core
?
It can be usefull to have, in the future, embed types pointing to js-core
typing for all others projets (react-imgix, angular, etc..)
I can, of course, make a PR for this !
Trying to fetch an image for an object in S3 with a '+'
in its key causes 404.
Example:
GET https://<cname>.imgix.net/E+P-003_D.jpeg // -> 404
GET https://<cname>.imgix.net/E%2BP-003_D.jpeg // -> 200
I suspect, it's due to encodeURI
in https://github.com/imgix/imgix-core-js/blob/master/src/imgix-core-js.js#L106. As the S3 key is a path, the module uses encodeURI
, which accepts '+'
symbols and does not encode them. S3, however, interprets those as spaces.
Describe the bug
An blended and watermarked image generated using the imgix-core-js looks different from the original image when wrapped in tags and loaded as a preview.
the image wrapped has distorted boarders.
To Reproduce
Steps to reproduce the behavior:
wrap the above link like so
<meta property="og:image" content="https://nate.imgix.net/nateLogo.png?q=1&auto=compress,format&w=600&bm=normal&bx=390&markx=180&markpad=0&markalign=left&blend64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDJiNmFkZjI5OTAwMzgwNjJjMDcuanBnP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9Mzg1M2E5MGFhOWE2MzRhZDg1MTdmYjNkMTllMmQ3ZGY&mark64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDA1NmU4NDI2MjAwMzg4MGU1ZTgucG5nP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9N2UzMWM2ZmQyODMyODExMDE1YzY4NzUxMmEyNTdmOGM&ixlib=js-2.3.1&s=9d3826f9ca00ae169bebc220d2f4e259">
and share it in apps(e.g. whatsapp, imessage) that has ability to preview, the preview shows a distorted boarder.
Expected behavior
A clear and concise description of what you expected to happen.
the preview should be the same as the original image
Screenshots
If applicable, add screenshots to help explain your problem.
Preview with distorted boarders
Original image
Information:
It would be useful for us to defined a handler for if the image either fails to be handled or when it's being processed etc.
Is there a way to do this already?
Cheers
From this pull request onward imgix-core-js
depends on typescript
and @types/node
.
As these are not run-time dependencies they should be under devDependencies
.
Because these are under dependencies
npm/yarn believes that imgix-core-js
needs those versions of typescript
and @types/node
to run which means you're pulling in potentially conflicting versions of Typescript and the nodes type package whenever a client imports imgix-core-js via yarn add imgix-core-js
or npm install imgix-core-js
.
I ran into this while upgrading to Typescript 3.7 as imgix-core-js
was breaking my build due to its dependency on Typescript 3.6.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.