0

I retrieve a user from the database who has profile picture. This picture is base64 and drawImage to the canvas. but it failed to draw.

Here's my code:

 var userId = {'userId' : 1};
 $scope.user = UserProfileService.getUserProfile.query(userId, function() {
      var canvas = document.getElementById("mycanvasweb");
      var ctx = canvas.getContext("2d");
      var image = new Image();
      image.onload = function() {
          ctx.drawImage(this, 0, 0);
      };
      image.src = $scope.user.profilePic;
  });

Please help.

Pang
  • 9,564
  • 146
  • 81
  • 122
Pyae Phyo Aung
  • 161
  • 1
  • 1
  • 10
  • Try setting the src before setting onload – cdosborn Apr 03 '15 at 07:37
  • @cdosborn, sir, i had already tried, it can't – Pyae Phyo Aung Apr 03 '15 at 07:39
  • Log `$scope.user.profilePic` to verify – cdosborn Apr 03 '15 at 07:43
  • data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAP0AAAEkCAYAAADkczevAAAgAElEQVR4nOy9Z5Rc5ZXvjQNBUudUOeecc-jqrs4556BOaqmVs0ARoQTKCQEiyQQhJARIYMDYZmyMB3uwx56xx-MwY49n7l3r_fS-694ZpE71ez-UuiVsMHjuXWsGo_9ae_WprlNVJ_2eZz97P2efO7itj1UqNUMqNQPM3rCPWeeGzdyyPGc3PzcNTJNi9obd_Mz0x3zu5uc__rc-bb0_ax9v2FTq5vYATE1NzW__zPQk3HIsZklxbfL6jfVTTM6mP_vhdIopYBL495kU14EPZ2ByBqZTMDsLs6n0cZma_A9IQWrm5u9Pz86ktyc1w-xs-pj............ – Pyae Phyo Aung Apr 03 '15 at 07:44
  • @cdosborn , base64 string is correct. i already checked. – Pyae Phyo Aung Apr 03 '15 at 07:47
  • according to [this](http://stackoverflow.com/a/4776378/1213041) you're method should work. You need to verify what is/isn't working. Check to make sure the canvas has a width, that is in the forefront, etc. Are you getting any js errors? – cdosborn Apr 03 '15 at 07:50
  • @cdosborn i didn't get any js errors or exceptions. i will recheck again. thanks – Pyae Phyo Aung Apr 03 '15 at 07:53
  • [Exception... "Component is not available" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://localhost:8080/nomunoli/js/app/controllers.js :: $scope.user – Pyae Phyo Aung Apr 03 '15 at 08:13
  • That means your src attr. Is faulty. – cdosborn Apr 03 '15 at 08:15

0 Answers0