I currently have a WordPress page that has a feature allowing users to create a small comic strip. This feature generates three images representing the comic strip.
Users can customize their character's hair, eyes, t-shirt, choose from five scenarios, and select from three options for how the scenario ends. The output consists of three images or panels made up of layered PNGs. These layered images include the chosen hair, eyes, t-shirt, backgrounds for selected scenarios, etc.
To make these images shareable, I decided to use html2canvas to render all possible combinations of images that could be created from the user choices, totaling 1260 variations. As html2canvas can be unreliable for live usage, I am attempting to generate all images programmatically beforehand.
The image generation process is going smoothly through my array of 1260 potential combinations until approximately halfway when I encounter a "split undefined" error suddenly. Despite checking each value in all 1260 indices, everything appears to be in order, leaving me completely puzzled.
Here is the JavaScript code:
// TWo-dimensional (2D) array representing the possible values a user can select per HTML panel. Each choice reveals the next panel.
var allArrays = [['0','1','2','3','4','5','6'], ['1','2'], ['0','1','2','3','4','5'], ['1','2','3','4','5'], ['1','2','3']];
// Recursive function to find all unique combinations of choices that users can make, resulting in 1260 possibilities
function allPossibleCases(arr) {
if (arr.length === 1) {
return arr[0];
} else {
var result = [];
var allCasesOfRest = allPossibleCases(arr.slice(1));
for (var i = 0; i < allCasesOfRest.length; i++) {
for (var j = 0; j < arr[0].length; j++) {
result.push(arr[0][j] + " " + allCasesOfRest[i]);
}
}
return result;
}
}
// Initiate recursion to get the 2D array of results
var uniqueIds = allPossibleCases(allArrays);
// Flatten the resulting 2D array output from 'allPossibleCases' into a single array with all 1260 unique combinations
var merged = [];
merged = merged.concat.apply(merged, uniqueIds);
// Output the flattened array with all 1260 values
console.log(merged);
var id1 = 0;
var id2 = 0;
var id3 = 0;
var id4 = 0;
var id5 = 0;
// Incrementation value for the myTimer function
var i = 0;
function myTimer() {
// Extract each string integer from the merged array items (all 1260) to populate individual text inputs on the website's frontend, simulating user choices programmatically.
var str = merged[i];
console.log('Current render increment = ' + i);
console.log('The array\'s current increment = ' + str);
var res = str.split(" ");
// Cast split string integers to proper integers
id1 = parseInt(res[0]);
id2 = parseInt(res[1]);
id3 = parseInt(res[2]);
id4 = parseInt(res[3]);
id5 = parseInt(res[4]);
// Populate form fields with fake user choices
$('.manualImageGen .hair').val(id1);
$('.manualImageGen .eyes').val(id2);
$('.manualImageGen .outfit').val(id3);
$('.manualImageGen .scenario').val(id4);
$('.manualImageGen .resolution').val(id5);
// Update Angular UI
$('.manualImageGen input').trigger('input');
// Assign a unique ID to the image generated by html2canvas related to one of the 1260 outcomes
var fileid = res[0] + res[1] + res[2] + res[3] + res[4];
// Capture a screenshot of the final image using html2canvas after faking the selections
html2canvas($('.finalImages'), {
onrendered: function(canvas) {
var data = canvas.toDataURL();
$.ajax({
type: "POST",
url: ajaxurl,
data: {
'action':'nopriv_ra_addrelationstick',
'relStick': data,
'fileid': fileid
}
})
.done(function(msg) {
if (msg == "false") {
alert('Sorry but you need to log in to save your R Stick');
}
});
}
});
if (i <= merged.length - 1) {
i++;
console.log("Items left to render = " + merged.length--);
} else {
clearInterval(myVar);
}
}
// Perform the myTimer function every second via setTimeout to avoid browser freezes and allow html2canvas to complete its task
var myVar = setInterval(function () {myTimer()}, 1000);