can't load remote images

[makc]

with cors headers it should be perfectly possible to load them, why force people to use php proxies?

[makc]

basically, somewhere around here you need to set img.crossOrigin (I am using canvas + image path here).

[jocooler]

IIRC, Canvas as implemented has a "tainted" data property that is enforced by the browser and can't be changed by anything. If the image is considered tainted, Caman can't do anything on the canvas. See here: http://stackoverflow.com/questions/13674835/canvas-tainted-by-cross-origin-data and http://stackoverflow.com/questions/7129178/browser-canvas-cors-support-for-cross-domain-loaded-image-manipulation?rq=1 I don't know for sure of CORS settings make a difference.

[makc]

yes well image will not be considered tainted if you attempt to authenticate and CORS headers say it is okay to use it. here is the workaround I am using atm:

        var image = new Image ();
        image.crossOrigin = 'anonymous';
        image.onload = function () {

            // camanjs will replace image or canvas with new canvas in its parent
            var div = document.createElement ('div');
            div.appendChild (image);

            Caman(image, function () {
                // use selected preset, or do whatever you want here
                this [preset] ();

                this.render (function () {
                    var dataUrl = div.querySelector ('canvas').toDataURL ('image/jpeg', 0.6);
                    .........
                });
            });

        };
        image.src = .....;

[jocooler]

Yes, that makes sense and was my next suggestion - load the image first, then run Caman on it.

It would be good to see this functionality in the core though.

On Tue, Oct 27, 2015 at 4:59 PM, makc [email protected] wrote:

yes well image will not be considered tainted if you attempt to authenticate and CORS headers say it is okay to use it. here is the workaround I am using atm:

    var image = new Image ();
    image.crossOrigin = 'anonymous';
    image.onload = function () {

        // camanjs will replace image or canvas with new canvas in its parent
        var div = document.createElement ('div');
        div.appendChild (image);

        Caman(image, function () {
            // use selected preset, or do whatever you want here
            this [preset] ();

            this.render (function () {
                var dataUrl = div.querySelector ('canvas').toDataURL ('image/jpeg', 0.6);
                .........
            });
        });

    };
    image.src = .....;

— Reply to this email directly or view it on GitHub https://github.com/meltingice/CamanJS/issues/184#issuecomment-151641936.