CODEWITHSUNDEEP
javascripthtmlimagecanvasionic-framework
Muhammad Omer
Muhammad Omer

Reputation: 111

canvas not drawing complete image from uri

i am using ionic and trying to draw selected image on canvas and convert it into base64 string. when i select image of low quality/size it appear perfectly fine but when image of high quality is selected, it only shows the upper part of image like image gets cropped.

$scope.getImages = function() {

    $scope.modal.hide();
    // Image picker will load images according to these settings
    var options = {
      maximumImagesCount: 1, // Max number of selected images, I'm using only one for this example
      width: 800,
      height: 800,
      quality: 80            // Higher is better
    };
    $cordovaImagePicker.getPictures(options).then(function (results) {
      // Loop through acquired images
      for (var i = 0; i < results.length; i++) {
        $scope.selectedImage = results[i];
      }

    }, function(error) {
      console.log('Error: ' + JSON.stringify(error));    // In case of error
    });



}

this is how image is being selected. the question is how can i draw complete selected image on canvas or in other words how can i get the image width and height in the loop, coz results[i] get only the uri of image.

Upvotes: 0

Views: 111

Answers (1)

Keyur Sakaria
Keyur Sakaria

Reputation: 700

This will help

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var img = new Image();
img.onload = function()
{ 
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
img.src = imagePath

Upvotes: 1

Related Questions