Giter Club home page Giter Club logo

js-core's Issues

Wrong signature when path contains spaces

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

host is depracated but...

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>

Could you also allow localhost:${port} in DOMAIN_REGEX?

Before you submit:

  • Please search through the existing issues to see if your feature has already been discussed.
  • Please take a moment to find out whether your idea fits with the scope and aims of this project.

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

Thank you.

Action Required: Fix Renovate Configuration

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.

Direct upload

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!

Errors when using library client-side.

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>

Relax js-base64 constraint to `^3.6`

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.

Base64 params

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?

Online docs don't match latest version

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. 🍻

Allow different Quality presets for buildSrcSet

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.

Set up more intelligent URL path escaping

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.

Latest @imgix/js-core does not work with Nuxt 3

@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:

  1. Go to https://stackblitz.com/edit/nuxt-starter-zucthe
  2. See error in console

Expected behaviour
@imgix/js-core should not conflict with newer ufo versions.

Information:

  • @imgix/js-core version: 3.7.0
  • Node.js version: 16.14.2

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

  • chore(deps): replace dependency @google/semantic-release-replace-plugin with semantic-release-replace-plugin
  • chore(deps): update actions/add-to-project action to v0.6.1
  • chore(deps): update node orb to v5.2.0
  • chore(dev-deps): update dependency tsd to v0.31.0
  • chore(deps): update actions/add-to-project action to v1
  • chore(deps): update node.js to v22
  • chore(dev-deps): update dependency rollup to v4
  • chore(dev-deps): update dependency sinon to v18
  • chore(deps): lock file maintenance
  • πŸ” Create all rate-limited PRs at once πŸ”

Pending Branch Automerge

These updates await pending status checks before automerging. Click on a checkbox to abort the branch automerge, and create a PR instead.

  • chore(dev-deps): update dependency @google/semantic-release-replace-plugin to v1.2.7
  • chore(dev-deps): update dependency @rollup/plugin-node-resolve to v15.2.3
  • chore(dev-deps): update dependency rollup to v3.29.4
  • chore(dev-deps): update dependency sinon to v15.2.0

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

circleci
.circleci/config.yml
  • node 5.1.0
  • cimg/node 20.2
github-actions
.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
npm
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

  • Check this box to trigger a request for Renovate to run again on this repository

Encrypting the origin URL

Please provide the following information and someone from @imgix/imgix-sdk-team will respond to your issue shortly.

Before you submit:

  • Please search through the [existing issues](existing issues) to see if your question has already been discussed.

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?

A fluid-width srcset is generated when a height is passed

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:

  • imgix-core-js version: 2.3.2

Incorrect url encoding

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

Expires params?

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!

Do you support Management APIs?

Before you submit:

  • Please search through the existing issues to see if your question has already been discussed.

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.

Typings

Would it be possible to get some typescript typings for this package, either in the repo or on definitely typed?

Query parameter values should be URL encoded

Description

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

If filename in path has spaces - signature becomes invalid

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.

Readme is out of sync with latest npm version

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.

Rollup support

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

`buildSrcSet` mutates `params` argument when building either fluid or fixed-width srcset.

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)

image

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:

  • imgix-core-js version: 2.3.1

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

Allow configure srcSet DPR generation

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]
}

Typescript types for `params`

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 !

Image has distored boarder when used in <meta></meta> tag

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:

Other examples:
Screen Shot 2020-10-02 at 8 57 49 AM
IMG_B17400BFF561-1

Information:

  • imgix-core-js version: [e.g. 2.3.1]

Typescript and `@types/node` should be devDependencies.

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.