Git Product home page Git Product logo

Comments (4)

koorgoo avatar koorgoo commented on August 16, 2024

Currently, no. But it seems to be a good idea.

from ngcropper.

reza-putra avatar reza-putra commented on August 16, 2024

close, i find my own solution

ngCropper.js

// Custumize data
this.cropMediaUrl = function(source, data) {
  var _decodeBlob = this.decode;
 return _createImage(source).then(function(image) {
    var canvas = createCanvas(data);
    var context = canvas.getContext('2d');

    context.drawImage(image, data.x, data.y, data.width, data.height, 0, 0, data.width, data.height);

    var encoded = canvas.toDataURL('image/png');
    removeElement(canvas);

    return _decodeBlob(encoded);
  });
};

demo.js

    / * source http://jsfiddle.net/handtrix/yvq5y/
     * @param  {String}   url
     * @param  {Function} callback
     * @param  {String}   [outputFormat='image/png']
     * @author HaNdTriX
    */
    function convertImgToBase64(url, callback, outputFormat){
        var img = new Image();
        img.crossOrigin = 'Anonymous';
        img.onload = function(){
            var canvas = document.createElement('CANVAS');
            var ctx = canvas.getContext('2d');
            canvas.height = this.height;
            canvas.width = this.width;
            ctx.drawImage(this,0,0);
            var dataURL = canvas.toDataURL(outputFormat || 'image/png');
            callback(dataURL);
            canvas = null; 
        };
        img.src = url;
    }

    function cropImage(img_url){
       convertImgToBase64(img_url, function(dataUrl){
          Cropper.cropMediaUrl(dataUrl,data)
          .then(function(blob){
            return Cropper.scale(blob, {width:width});
          })
         .then(function(blob) {
             //source
             console.log(blob);
         });
     });
    }

from ngcropper.

koorgoo avatar koorgoo commented on August 16, 2024

Thanks for feedback.

from ngcropper.

kjfdebruin avatar kjfdebruin commented on August 16, 2024

@evo3cx Thanks for sharing your code. I would also like to use ngCropper to crop a file from a URL. I'm getting a "data is not defined error" on this line:
Cropper.cropMediaUrl(dataUrl,data)
Where should data be populated?

from ngcropper.

Related Issues (20)

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.