Base64 Encoding about angularjs-imageupload-directive HOT 6 CLOSED

Yeah i have thought about this too. The directive is under major refactoring to be more flexible in the future.

We could make base64 the default and add an optional attribute "asBlob". This would make the canvas-to-blob.js optional too.

Or we can do the opposite and add a "asBase64" attribute.

What do you think?

By the way, i am looking for general feedback to the new attribute bases usage. You can find examples in demo.html

Regards,

Fabian

from angularjs-imageupload-directive.

Honestly I think Base64 should be the default, as I believe it has a wider use case than Blobs. Having external dependencies be optional is good practice too, I think.

from angularjs-imageupload-directive.

I've thought about this and hear is a proposal:

<input type="file" accept="image/*" image="image2"
    resize-max-height="300"
    resize-max-width="250"
    resize-quality="0.7" />

<!-- using blob -->
Original <img ng-show="image2" ng-src="{{image2.url()}}" type="{{image2.file.type}}" />
Resized <img ng-show="image2" ng-src="{{image2.resized.url()}}" type="{{image2.resized.type}}" />

<!-- using base64-->
Original <img ng-show="image2" ng-src="{{image2.base64()}}" type="{{image2.file.type}}" />
Resized <img ng-show="image2" ng-src="{{image2.resized.base64()}}" type="{{image2.resized.type}}" />

We expose url, base64, blob, functions on the result object and cache the value after invokation. This would give you the choice to choose and would make canvasToBlob.js only necessary if you use image.resized.blob()

• image
  • url()
  • base64()
  • type
  • resized
    • url()
    • base64()
    • blob()
    • type

Would that fit in your use case?

from angularjs-imageupload-directive.

This will become to complex... i think we should remove "the blob thing" completely. What about

• image
  • file
  • url
  • dataUrl()
  • resized
    • dataUrl
    • type

file and url are already available. if you need base64 you can optionally call dataUrl().
On the resized object you only get the base64 encoded image via dataUrl and the image type

from angularjs-imageupload-directive.

I've already done most of that. Yesterday I ripped out canvas-to-blob.js and it only supports data URL for resizing. See my fork. I'll update it to match what you've described and put in a pull request.

from angularjs-imageupload-directive.

Sounds great!

from angularjs-imageupload-directive.