画布没有从uri绘制完整的图像

Question

我正在使用 ionic 并尝试在画布上绘制选定的图像并将其转换为 base64 字符串。 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
    });



}

这就是选择图像的方式。问题是如何在画布上绘制完整的选定图像，或者换句话说，如何在循环中获取图像的宽度和高度，因为结果 [i] 仅获取图像的 uri。

Answer 1

这会有所帮助

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