1

I wish to create a simple function in angularJS so I can read image from URL. Simply I put image URL and it convert image of that URL to base64 and saves to DB as well it shows to that Image Canvas. I wish to read image of all type irrespective of only PNG.

I have tried few logics, from Google I found code where it takes dimensions of canvas first..

$scope.convertBase64 = function () {
            console.log("Firing Function");
            var canvas = $scope.imageURL;
            canvas.width =  $scope.imageURL.width;
            canvas.height =  $scope.imageURL.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage($scope.imageURL, 0, 0);
            var dataURL = canvas.toDataURL("image/png");
            $scope.imageURLBase =  dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
            return $scope.imageURLBase;
        };

At same moment I wish to save image's base64 content. How to render using that base64 content anytime irrespective of canvas size using ng-source or else.

mautrok
  • 961
  • 1
  • 17
  • 41
Sankalp
  • 1,300
  • 5
  • 28
  • 52
  • http://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html –  Aug 26 '15 at 07:49
  • @RachelGallen - But I wish to encode image content is that possible? Link you shared is converting simple text to base64. You deleted your comment? – Sankalp Aug 26 '15 at 07:51
  • To convert image to base64: http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript –  Aug 26 '15 at 07:57
  • @Sphaso: How would I read in same format with your first link. I wish to save it to DB as well. And next again render to canvas element anywhere with angular? – Sankalp Aug 26 '15 at 07:59
  • I'm not sure what you mean. Save the base64 string on DB and then display it using techniques described in my first comment. –  Aug 26 '15 at 08:02
  • Exactly Yes. So I can continue to render image anywhere in future. – Sankalp Aug 26 '15 at 08:03
  • So problem solved :) –  Aug 26 '15 at 08:04
  • 1
    http://jsfiddle.net/handtrix/xztfbx1m/ – Rachel Gallen Aug 26 '15 at 08:06
  • To convert an image to base64: follow the link at my second comment. To display the base64 representation: follow the link at my first comment. Is there anything else you want to do? –  Aug 26 '15 at 08:06
  • @Sphaso Create a fiddle please. – Sankalp Aug 26 '15 at 08:12
  • No need, @RachelGallen already did –  Aug 26 '15 at 08:15
  • I wish to read it from URL. not by file element. – Sankalp Aug 26 '15 at 08:16
  • 1
    Warning, the code can fail if the image breaks cross origin security rules. You must either put a try catch around the toDataURL or check that it is not cross origin. If it is cross origin this function will not work unless you turn of security on the browser. Also BASE64 is a very wasteful format in terms of memory. Javascript strings are 16 bit and you use only 6 of those bits in BASE64. Upload the image to your server as is, and store the image local URL in the database rather than the dataURL it will save you and your clients time. – Blindman67 Aug 26 '15 at 08:17

0 Answers0