blueimp / javascript-canvas-to-blob Goto Github PK

I was having problems with the AMD loader for this repo and your Load-image repo (require.js mismatch error). I switched to the intro/outro pattern that you have in your fileupload.js script, which fixed the problem.

I think you should consider copying the same style.

Sample intro copied for relevance.

(function (factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        // Register as an anonymous AMD module:
        define([
            'jquery',
            'jquery.ui.widget'
        ], factory);
    } else {
        // Browser globals:
        factory(window.jQuery);
    }
}(function ($) {
    'use strict';
    ...

Mac OS X stable browsers:
Chrome 35

Firefox 30

Opera 21

Can this function somehow be used to convert a dataUrl into a blob?

Does it makes any difference whether I do

1. Canvas > toBlob()

or

2. Canvas > toDataUrl() > toBlob()

Thanks for help.

Hi,

I'm just curious if IE 10 and 11 vender prefixed version msToBlob has any downside?
If I understand it correctly msToBlob seems to only support image/png and no quality param at all 🤔

Hi,
I've been looking for changelogs without success.
No way to know if v3 api has breaking changes

Can you also add the possibility to export to a jpg image like the following?

canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality

The specification is here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement?redirectlocale=en-US&redirectslug=DOM%2FHTMLCanvasElement

I get a module "blueimp-canvas-to-blob" not found when writing a bundle in gulp through browserify ...

The Base64, for line feed may enter every 76 characters, you must remove the line breaks in the code of standard MIME.
Trouble, I spent time in the processing of new-line code. How do may be to remove the new line code in a separate process from the original,
I think it's nice to have the treatment in your plugin.
What would you say?
I described my suggestion below.

// For line feed may enter every 76 characters, 
// remove the line break code if it was obtained from the mail object in the standard MIME.
if (dataURI.split(',')[0].indexOf('base64') >= 0) {
    // Convert base64 to raw binary data held in a string:
    byteString = atob((dataURI.split(',')[1]).replace(/\s/g, ''));
} else {
    // Convert base64/URLEncoded data component to raw binary data:
    byteString = decodeURIComponent((dataURI.split(',')[1]).replace(/\s/g, ''));
}

Hello,
When I am trying to use toBlob it gives me " Uncaught (in promise) DOMException: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported."

I am trying this :

  // looping through thumbnail list to update thumbnail
                thumbnails.forEach(function(item) {
                    // converting canvas to blob to get short url
                    console.log('canvas', item.canvas)

                    //item.canvas.toBlob(blob => item.data = URL.createObjectURL(blob), 'image/jpeg');
                    if (item.canvas.toBlob) {
                        item.canvas.toBlob(function (blob) {
                            // Do something with the blob object,
                            // e.g. create multipart form data for file uploads:
                            var formData = new FormData()
                            formData.append('file', blob, 'image.jpg')
                            console.log('formData', formData)
                            // ...
                        }, 'image/jpeg')
                    }

                    // deleting unused property
                    delete item.canvas;
                });

Do you know why I am facing this issue, OR how can I fix this?

Using the canvas-to-blob.min.js, calculating image bytes always gives far below the actual image size.

Image:
6.30 MB (6291456 Bytes)

Options:
maxFileSize: 4000000, //4MB

Result with canvas-to-blob:
fileSize: 271959 options.maxFileSize: 4000000
Should return the error "File is too large". What is going on?

Result without canvas-to-blob:
fileSize: 6609149 options.maxFileSize: 4000000

Some jpg files are resized with 0 bytes on an iPOD 4 that is working fine on iPAD 2. It's always the same images that don't work for my testing set of 54 files. Are you aware of any trouble with the iPOD to run your code correctly for some type of images.

Thanks

Which result has smaller size:

canvas. toDataURL() or canvas.toBlob()

I tried the following

canvas.toBlob(function (blob) {
                    alert(blob.size);

                }, 'image/png'
            );

It turns out the the size is very small about 9000 bytes. This is far to low for images made on the iPhone.

Do you have any idea on that?

It works well on chrome and safari mobile browser but it doesn't work with android native browser. Any solution?

Thanks !

link:
https://code.google.com/p/chromium/issues/detail?id=67587#makechanges

still not in chrome :(
AFAIK

Thanks for writing this!