首页 文章

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

提问于
浏览
0

我正在使用离子并尝试在画布上绘制所选图像并将其转换为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 .

1 回答

  • 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
    

相关问题