Question

我正在使用离子并尝试在画布上绘制所选图像并将其转换为base64字符串。当我选择低质量/大小的图像时，它看起来非常精细但是当选择高质量的图像时，它只显示图像的上半部分，如图像被裁剪。

$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

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

1 个答案: