javascript - Saving multiple SVGs to canvas with text then getting dataURL -

i have built angularjs application, in application svg files represent garments user chooses. have download button (currently) saves first svg png database , use view display "preview".

the directive created looks this:

.directive('kdexport', function () {      return {         restrict: 'a',         scope: {             target: '@kdexport',             team: '='         },         controller: 'exportimagecontroller',         link: function (scope, element, attrs, controller) {              console.log(scope.team);              // bind onclick event of our button             element.bind('click', function (e) {                  // prevent default action                 e.preventdefault();                  // generate image                 controller.generateimage(scope.target, scope.team, function (preview) {                      // create our url                     var url = '/kits/preview/' + preview.id;                      // open new window                     window.open(url, '_blank');                 });             });         }     }; }) 

and controller looks this:

.controller('exportimagecontroller', ['previewservice', function (service) {     var self = this;      // function remove hidden layers of svg document     var removehidden = function (element) {          // element children         var children = element.children(),             = children.length;          // if have children         if (children.length) {              // each child             (i; >= 0; i--) {                  // our child                 var child = angular.element(children[i - 1]);                  // remove hidden child's children                 removehidden(child);                  // finally, if child has class "hidden"                 if (child.hasclass("hidden")) {                      // remove child                     child.remove();                 }             }         }     };      // public function generate image     self.generateimage = function (element, team, onsuccess) {          // our svg         var target = document.getelementbyid(element),             container = target.getelementsbyclassname('svg-document')[0],             clone = container.clonenode(true);          // remove hidden layers         removehidden(angular.element(clone));          // create our data         var data = clone.innerhtml,             svg = new blob([data], { type: 'image/svg+xml;charset=utf-8' });          // our context         var canvas = document.getelementbyid('canvas'),             ctx = canvas.getcontext('2d');          // create our image         var domurl = window.url || window.webkiturl || window,             url = domurl.createobjecturl(svg),             img = new image();          // when image has loaded         img.onload = function () {              canvas.width = 1000;             canvas.height = 500;              // draw our image using context             ctx.drawimage(img, 0, 0, img.width, img.height, 0, 0, 1000, 500);             domurl.revokeobjecturl(url);              // our url base64 string             var dataurl = canvas.todataurl("image/png");              // create our model             var model = {                 teamname: team.name,                 sport: team.sport,                 data: dataurl             };              // create our preview             service.create(model).then(function (response) {                  // invoke our success callback                 onsuccess(response);             });         }          // set url of image         img.src = url;     }; }]) 

this works fine single svg document, client has asked me multiple svgs title under each 1 , want in 1 png. have not done lot of work canvasing, not sure if can done. know how might achieve this?

ok, figured out myself using promises. created method called drawimage allowed me draw image each svg. make sure images drawn before invoke todataurl made function return promise , once image loaded resolved promise. used $q.all dataurl , save data database. methods looked this:

// private function drawing our images var drawimage = function (canvas, ctx, clone) {      // defer our promise     var deferred = $q.defer();      // create our data     var data = clone.innerhtml,         svg = new blob([data], { type: 'image/svg+xml;charset=utf-8' });      // create our image     var domurl = window.url || window.webkiturl || window,         url = domurl.createobjecturl(svg),         img = new image();      // when image has loaded     img.onload = function () {          // our location         getnextlocation(canvas.width, canvas.height, img);          // draw our image using context (only draws half image because don't want show back)         ctx.drawimage(img, 0, 0, img.width / 2, img.height, location.x, location.y, location.width, location.height);         domurl.revokeobjecturl(url);          // resolve our promise         deferred.resolve();     }      // set url of image     img.src = url;      // return our promise     return deferred.promise; };  // public function generate image self.generateimage = function (element, team, onsuccess) {      // our svg     var target = document.getelementbyid('totals'),         containers = angular.element(target.getelementsbyclassname('svg-document'));      // our context     var canvas = document.getelementbyid('canvas'),         ctx = canvas.getcontext('2d');      // set our canvas height , width     canvas.width = 2000;     canvas.height = calculatecanvasheight(containers.length);      // create our array of promises     var promises = [];      // each container     (var = 0; < containers.length; i++) {          // our container         var container = containers[i],             clone = container.clonenode(true);          // remove hidden layers         removehidden(angular.element(clone));          // add our promise array         promises.push(drawimage(canvas, ctx, clone));     }      // when promises have resolve     $q.all(promises).then(function () {          // our url base64 string         var dataurl = canvas.todataurl("image/png");          // create our model         var model = {             teamname: team.name,             sport: team.sport,             data: dataurl         };          // create our preview         self.create(model).then(function (response) {              // invoke our success callback             onsuccess(response);         });      }) }; 

obviously there missing code here, code answers issue, rest makes service work :)