Git Product home page Git Product logo

changedpi's Introduction

changeDPI

changeDPI provides 2 utility functions that can change the dpi of canvas-generated image, of either dataUrl or blob formats. The functions separate the header from the image data, convert and manipulate just the header, then sticks the header back on the file. In this way, very large images can be converted quickly without having to convert the entire contents of an image file. This process is non-destructive—image data does not get modified in the process.

Install

This project depends on node and npm.

npm install --save changedpi

Usage

From a canvas element dataUrl:

// create the dataUrl at standard 72dpi
var dataUrl = canvas.toDataURL('image/jpeg', 0.92);
var daurl150dpi = changeDpiDataUrl(dataUrl, 150);

From a canvas element blob:

// create the blob at standard 72dpi
canvas.toBlob(function(blob) {
  changeDpiBlob(blob, 300).then(function(blob){
    // use your changed blob
  })
},'image/jpeg', 0.92);
  TODO add example with file reader.

ES6

This module uses ES6. To see a compiled ES5 version, run npm run build and look in dist/.

Testing

npm install .
npm run test

Contribute

Please do contribute! Open an issue or submit a pull request.

The project falls under @Shutterstock's Code of Conduct.

License

MIT.

changedpi's People

Contributors

asturur avatar jasonoh avatar remi-ibi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

changedpi's Issues

Using with image/png

Is it correct that you can only use jpeg, I am trying to use this project with data urls encoded in image/png?!

Improvements in documentation

I would like to contribute with improvements in documentation such as README, CHANGELOG and also translate to Brazilian Portuguese.

Add to npm repository

I'd like to be able to use this util library using the latest JS ecosystem. To do this, it would be good if this library was published to npm or yarn.

Support for Node.js

Expected behavior

I was expecting this module to work on Node.js, am I wrong?

Actual behavior

It throws an error because of: FileReader is not defined

Steps to reproduce the behavior

Additional specs (e.g. browser, version, etc.)

Failed to load resource: Data URL decoding failed

I want to improve the quality of an image, but I am not able to display the image generated with the changeDpiDataUrl function. The error I get is "Failed to load resource: Data URL decoding failed".
Without using the base64header, I have no problems. But as soon as the base64header is included, my browser is not able to resolve the image.
My function looks like this
image

Has anyone had the same problem and knows a solution?

changeDpiDataUrl() sometimes returns invalid PNGs.

When I pass the attached PNG image in changeDpiDataUrl(), it returns an invalid PNG. It's easy to reproduce:

var res = changeDpiDataUrl(attached_png, 300);

'res' will be a badly formed PNG image.

I don't fully understand the code, but it looks like detectPhysChunkFromDataUrl() cannot find what it's looking for, so it returns -1. The calling code checks if the return value is truthy; -1 is, so the header length calculation is wrong.

base64_png.txt

Uncaught ReferenceError: exports is not defined

Getting Uncaught ReferenceError: exports is not defined upon loading my webapp

Details

Angular 12 webapp
In package.json: "changedpi": "^1.0.4",
"node_modules/changedpi/dist/index.js" added to angular.json under architect.build.scripts
declare module 'changedpi' added to src/typings.d.ts
Imported into component using import * as changedpi from 'changedpi';

Upon loading webapp:
image

Clicking on error shows source:
image

Can anyone advise if I've integrated incorrectly, or if there's an underlying issue in the library?

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.