data-uri/datauri

Generate Data-URI scheme via terminal or node.js

datauri's Issues

Remove first line! No JS comment! Webpack cant read file

datauri/index.js

Line 1 in 404b7db

#!/usr/bin/env node

How to pass an array of files and write in the same css file ?

Hi thanks for this great plugin, I am looking to make a scss import with datauri as variables (adam-lynch/gulp-image-data-uri#1).

//== _datauri.scss
$data-bg_pre_2: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...";
$data-bg_pre_3: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...";

My developpment knowledge is not very nice !! For the moment I can write only one variable in _datauri.scss but I would like to write multiples variables in the same file.

//== gulpfile.js

gulp.task('datauri', function() {
    // gulp.src([paths.styles.img +'/bg/bg_pre_3.jpg', paths.styles.img +'/bg/bg_pre_2.jpg'])
    //     .pipe(imageDataURI())
    //     .pipe(concat('_datauri.scss'))
    //     .pipe(gulp.dest(paths.styles.src +'/base/'));
    //     console.log(imageDataURI());

    var DataURI = require('datauri'),
    basename, sassVar,
    path = require('path'),
    fs      = require('fs'),
    //file = [paths.styles.img +'/bg/bg_pre_3.jpg', paths.styles.img +'/bg/bg_pre_2.jpg'], // not working
    //dUri    = new DataURI(file[0]),
    file = paths.styles.img +'/bg/bg_pre_3.jpg',
    dUri    = new DataURI(file),
    basename = path.basename(file, path.extname(file)),
    sassVar = '$data-'+ basename + ': "'+ dUri.content +'";';

    fs.writeFile(paths.styles.src +'/base/_datauri.scss', sassVar, function (err) {
        if (err) throw err;
        console.log('It\'s saved!');
    });
});

Any idea how to make this ?

offer option to get datauri for string

we usually read file and store in string .. so can we should able to convert string to datauri .. this will be cool feature..

TypeScript support

> npm install @types/datauri
npm ERR! code E404
npm ERR! 404 Not Found: @types/datauri@latest

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/me/.npm/_logs/2018-12-07T09_18_49_613Z-debug.log

it looks like good tool but typescript not supported?
I just want to convert image path to data uri create react apps project...

Cannot use within webpack

I'm using webpack to compile some serverside javascript. One of these files builds an mjml server that transitively depends on datauri. Webpack gives me the following error:

Module parse failed: .../node_modules/datauri/index.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)

I can fix this in my webpack config, by writing a custom loader that takes the file and then deletes any beginning-#-lines. But note that of all the npm modules I'm using, this is the only one. I'll probably end up doing this to clean up this webpack error, and avoid blocking on this Issue.

From what I've seen in other threads, it's considered "bad practice" (according to The Internetz) to have a file act as both a script as well as a library module, for this reason.

I'm filing a bug, to track fixing this, or to close out my Issue as Working As Intended/Will Not Fix. :)

undefined is not an object (evaluating 'version.trim')

Hello,

I am trying to run datauri in a RN application. However, when I run the application, I get the following error:
undefined is not an object (evaluating 'version.trim').

I am importing

datauri as import { sync as DataURI } from 'datauri';

Maybe this is an issue related to using metro for building the react native application, similar to the webpack issue.

Here is my package .json

{ "name": "democracynow_reactNative", "version": "0.0.1", "private": true, "scripts": { "test": "jest" }, "dependencies": { "axios": "^0.18.0", "axios-mock-adapter": "^1.14.1", "datauri": "^1.1.0", "html-entities": "^1.2.1", "native-base": "^2.4.4", "react": "^16.2.0", "react-dom": "^16.2.0", "react-native": "^0.53.3", "react-native-config": "^0.11.5", "react-native-navigation": "^1.1.108", "react-native-orientation": "^3.1.3", "react-native-progress": "^3.4.0", "react-native-render-html": "^3.10.0", "react-native-video": "3.1.0", "react-native-windows": "^0.41.0-rc.0", "react-redux": "^5.0.7", "redux": "^3.7.2", "redux-promise": "^0.5.3", "striptags": "^3.1.1", "w3c-xmlhttprequest": "^2.1.2" }, "devDependencies": { "babel-jest": "20.0.3", "babel-plugin-import-rename": "^1.0.1", "babel-preset-react-native": "2.0.0", "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", "jest": "20.0.4", "react-native-config-node": "0.0.2", "react-test-renderer": "16.0.0-alpha.12", "redux-mock-store": "^1.5.1" }, "jest": { "preset": "react-native", "setupTestFrameworkScriptFile": "<rootDir>/app/__tests__/setup_tests.js", "testRegex": "__tests__/.*\\.spec.js$" }, "rnpm": { "assets": [ "./assets/fonts/" ] } }

If we pass a data URI to `new DataURI` - should we simply return it?

I ran into an edge case with https://github.com/jrit/web-resource-inliner - specifically here https://github.com/jrit/web-resource-inliner/blob/6ca0b528b6e7020c9782bc7d8ccbc5ea83818ae0/src/util.js#L184 where the src passed was actually a data URI component in itself. I will be submitting a PR to web-resource-inliner that sniffs if it's a data URI or not in that block of code, and if so, return the callback early - however I think that perhaps it should be built into this package?

My logic was, if we have a function... for example... named convertPathToString, it should return a string as the output. If we pass a string initially, it should just return the same thing.

Could use validator's isDataURI function here https://github.com/chriso/validator.js/blob/3443132beccddf06c3f0a5e88c1dd2ee6513b612/src/lib/isDataURI.js or import validator and use validator.isDataURI.

-

Allow passing a custom template for the CSS

Like gulp-svg-sprites does. This would be handy.

please change 'getCSS' to 'getCss'

i find your document use getCSS，but your api should be getCss

Cannot find module './old/module'

Hi guys,

I'm trying to use datauri, but I'm not able to import it.
Inserting
var datauri = require('datauri');

in my files, the import produces the error

Cannot find module './old/module'

Mu context:

• Node version: v5.10.1
• Ubuntu Linux
• "datauri": "^1.0.4", via npm
• npm version: 3.8.3

Any suggestions ?
Thanks in advance

datauri 3.0 - RFC 🎉

Since 1.0 release, datauri has taking off in matter of popularity.

Based on that, I invited @ruyadorno and @caiogondim to be part of this, moving plans to next level with a new github org. This is the first step on the challenge to turn an old pet project into series of robust and open community tools.

Next step will be 2.0 version, which is expected to get a considerable perfomance boost, better docs and build process improvements. Those changes will not only help users but also contribution experience.

Besides a major release, compatibility might be taken into account, since many node modules rely on datauri.js as main transformer. I've listed below some possible things to change:

Build and test

• Keep datauri module and datauri-cli on a single monolithic repo using lerna.js instead of current code, or split them in 2 github projects?
• Use jest as test runner instead of mocha.
• For code coverage, use istanbul instead of blanket.js. Should keep coveralls? Anything newer and more interesting?
• Run node benchmark tests. For this topic, I might grab some ideas from fast-memoize, since I'm not an expert on this subject yet. I'm open for suggestions/help though.
• Write code for node.js 6+ and support old versions with Babel transpiler, or move back to fully es5?

Module core. AKA npm i datauri

• Switch back to functional programming paradigm and implement deprecation warning when class is instantiated. I believe this will bring more flexibility for the module improvements below.
• Promise as default async approach, support error notice and suggest callback for node older than 0.12
• Bulk transform when an array is given. Ex.: datauri(['image1.jpg', 'image2.jpg']).
• Optimize string manipulation if possible. How caching calls based on file hash would affect the experience?
• Deprecate this[metadata_category] scope to follow class deprecation. Return a immutable object or just remove it at all.
• Split, when possible, each method into new files. This brings more modularity to the code and make things straight to the point. Example require('datauri/buffer').
• Improve streams to support pipe instead of the current readable approach. Do not extend Stream class like 1.0 does. Probably moving it to a module like datauri/stream could be a kick start.
• Deprecate synchronous calls? Generators are settle, not to mention async and await already on node nightly builds.
• datauri-cli install notice if datauri is executed on cli. I forgot to implement it on version 1.

CLI. AKA npm i -g datauri-cli

• Pipetize it! cat image.jpg | datauri --copy.
• Match glob expressions datauri images/**/*.png --css, that's where array bulk calls propose and Promise.all would act.
• Support download? datauri https://image.jpg. In fact curl -0 url | datauri would solve it though.

Docs

• Create a js.org webpage from markdown? Or stick with npm/github docs? I was wondering something like Apollo Client's one.

Future minor/pos 2.0 releases

• Time for type systems? I'd go with flow.
• With core being split into files, a web version using File api or Canvas tag would be nice.

datauri@next ideas, and possible datauri org projects

• Remove deprecated features.
• Browser plugin?

Encode from stream

Is it possible to encode data coming from a string or is it necessary to pipe it into buffer first?

[FEATURE] Provide image dimensions in class instance

I could really use the image width and height in the class instance. Setting only the background image is not ideal in CSS and I would love to spit out the image dimensions as well.

M4A Audio is not handled

Apple format audio is converted to octetstream. A file with this signature (using file):

... ISO Media, Apple iTunes ALAC/AAC-LC (.M4A) Audio

will result in

data:application/octet-stream;base64,AAAAIGZ0e...

This cannot be played by the HTMLAudioElement.