Function to take 3 images and concatenate into one

I am building a site in angularJS which contains a graph, dynamically I need to be able to take the icons that are layered on the graph, and situate them side by side and use that as an icon instead of multiple icons overlapping. This needs to work dynamically and inline with the rest of my code.

I have this current function in my controller:

Code:

CreateCompositeImage: function(l, c, r) {

                var blankPlaceholder = "../Content/images/audiogram/blank.png";

                var cvs = document.createElement("canvas");

                cvs.id = "iconCanvas";

                var ctx = cvs.getContext("2d");

                var imgL = new Image();

                var imgC = new Image();

                var imgR = new Image();

                var leftImage, centerImage, rightImage;

                var re = /(([^)]+))/;



                cvs.height = 30;

                cvs.width = 60;



                if (l === "" || l === undefined) {

                    leftImage = re.exec(blankPlaceholder)[1];

                } else {

                    leftImage = re.exec(l)[1];

                }

                if (c === "" || c === undefined) {

                    centerImage = re.exec(blankPlaceholder)[1];

                } else {

                    centerImage = re.exec(c)[1];

                }

                if (r === "" || r === undefined) {

                    rightImage = re.exec(blankPlaceholder)[1];

                } else {

                    rightImage = re.exec(r)[1];

                }



                imgL.onload = function() { ctx.drawImage(imgL, -1, 0); }

                imgC.onload = function() { ctx.drawImage(imgC, 15, 0); }

                imgR.onload = function() { ctx.drawImage(imgR, 31, 0); }



                imgL.src = leftImage;

                imgC.src = centerImage;

                imgR.src = rightImage;



                return "url(" + cvs.toDataURL("image/png") + ")";

            }

I am stuck because I want the image loading to be completed synchronously so that I can return the completed canvas afterwards. I caot seem to get the code to wait for each image to load before continuing.
I considered using promises however I don't really know how to implement them.

It works fine if I output to a variable inside the last image onload and then use a callback function but I want to be able to use it inline with other code like below:

Code:

image.src = CreateCompositeImage("pathToLeftImage","pathToCenterImage","pathToRightImage");

Any thoughts?

Any help would be greatly appreciated

برچسب: نویسنده: آیلین رضوانی تاريخ: شنبه 17 تير 1396 ساعت: 21:34

درباره سایت

آخرین مطالب

امکانات وب

Function to take 3 images and concatenate into one

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه