AARRGGHHH Posted June 26, 2018 Share Posted June 26, 2018 This code works perfectly on a desktop or laptop, and on non-iOS mobile devices. It takes a thumbnail sample of an edited image and displays it at full size in a new canvas. On iOS, I just see a blank screen where the canvas should be. function click5() { document.getElementById("preview").style = "visibility:visible;"; document.getElementById("cPreviewCaption").style = "font-size:90%; font-weight:550; text-align:center; color:#FFFFFF; padding-top:6px;"; // Apply change to preview image which will open beneath thumbnails var cP = document.getElementById("cPreview"); var contextP = cP.getContext("2d"); var cO = document.getElementById("cOriginal"); var contextO = cO.getContext("2d"); var imgData = contextO.getImageData(0,0,cO.width,cO.height); var data = imgData.data; //read full size image //similar image read/write code works fine in another image filter so this does not appear to be the issue for (i = 0; i < data.length; i += 4) { red[i] = imgData.data[i]; green[i] = imgData.data[i+1]; blue[i] = imgData.data[i+2]; alpha[i] = imgData.data[i+3]; } //set adjustments represented by user interaction with thumbnails for (i = 0; i < data.length; i += 4) { red[i] = red[i] + finalRedAdjust; if (red[i] < 0) red[i] = 0; if (red[i] > 255) red[i] = 255; green[i] = green[i] + finalGreenAdjust; if (green[i] < 0) green[i] = 0; if (green[i] > 255) green[i] = 255; } //write full size image with adjustments to memory for (i = 0; i < data.length; i += 4) { imgData.data[i] = red[i]; imgData.data[i+1] = green[i]; imgData.data[i+2] = blue[i]; imgData.data[i+3] = alpha[i]; } //write image in memory to file contextP.putImageData(imgData, 0, 0); //add borders for canvases. document.getElementById('cOriginal').style = "border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060; visibility:hidden; display:none;"; document.getElementById('cPreview').style = "border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060; visibility:visible; display:block;"; //Scroll page to preview image location.hash = "null"; location.hash = "previewAnchor"; } // End Table Click Event Functions I have tried this with small images, so dimensions and file size do not appear to be the issue. Thank you Link to comment Share on other sites More sharing options...
davej Posted June 26, 2018 Share Posted June 26, 2018 Does the Safari console show any errors? https://support.apple.com/guide/safari-developer/debugging-overview-devd24689f72/mac Link to comment Share on other sites More sharing options...
AARRGGHHH Posted June 26, 2018 Author Share Posted June 26, 2018 This requires a Mac, correct? Unfortunately, I do not have one. I have run the file on iOS (on my iPhone) in Chrome, Firefox, and Safari, and the problem appears the same in all three browsers. The iOS "Inspector" app, which usually points me in the right direction, shows no errors, and its built in browser (I assume Safari) also displays the same lack of a canvas. Link to comment Share on other sites More sharing options...
Ingolme Posted June 26, 2018 Share Posted June 26, 2018 At this point I would start debugging using the alert() function. To start off, put in alert() right at the beginning of the click5() function to see if it is even being called. If that works, try alerting different variables in the function to see if they contain what they are supposed to. Since you don't have a Javascript console available on the iPhone, you can set up a small script to show the errors in alert boxes like this: window.onerror = function(message, file, line) { alert("Error in " + file + " on line " + line + ": " + message); } Be sure to remove it after all issues are solved. Link to comment Share on other sites More sharing options...
AARRGGHHH Posted June 26, 2018 Author Share Posted June 26, 2018 I will try that next Ingolme, thank you very much. I have a feeling, since the page is not triggering any errors in the iPhone "Inspector" app, it may not trigger any errors here either. But it's definitely worth a try. Errors like this are how I chose the name AARRGGHHH. 😡 Link to comment Share on other sites More sharing options...
dsonesuk Posted June 26, 2018 Share Posted June 26, 2018 It may be a compatibility issue in using document.getElementById("preview").style = "multiple style properties" to set multiple properties. IT IS advised to use this to set a singular property only, while by using document.getElementById("preview").style.cssText = "multiple style properties" OR document.getElementById("preview").setAttribute('style', 'multiple style properties') is another option. 1 Link to comment Share on other sites More sharing options...
AARRGGHHH Posted June 27, 2018 Author Share Posted June 27, 2018 That was the problem !!! Thank you so much, dsonesuk. The corrected code is below: function click5() { document.getElementById("preview").style.visibility = "visible"; document.getElementById("cPreviewCaption").style = "font-size:90%; font-weight:550; text-align:center; color:#FFFFFF; padding-top:6px;"; //This could also be updated if needed. // Apply change to preview image which will open beneath thumbnails var cP = document.getElementById("cPreview"); var contextP = cP.getContext("2d"); var cO = document.getElementById("cOriginal"); var contextO = cO.getContext("2d"); var imgData = contextO.getImageData(0,0,cO.width,cO.height); var data = imgData.data; //read full size image for (i = 0; i < data.length; i += 4) { red[i] = imgData.data[i]; green[i] = imgData.data[i+1]; blue[i] = imgData.data[i+2]; alpha[i] = imgData.data[i+3]; } //set adjustments represented by user interaction with thumbnails for (i = 0; i < data.length; i += 4) { red[i] = red[i] + finalRedAdjust; if (red[i] < 0) red[i] = 0; if (red[i] > 255) red[i] = 255; green[i] = green[i] + finalGreenAdjust; if (green[i] < 0) green[i] = 0; if (green[i] > 255) green[i] = 255; } //write full size image with adjustments to memory for (i = 0; i < data.length; i += 4) { imgData.data[i] = red[i]; imgData.data[i+1] = green[i]; imgData.data[i+2] = blue[i]; imgData.data[i+3] = alpha[i]; } //write image in memory to canvas contextP.putImageData(imgData, 0, 0); //set new styles - one at a time to keep Mr. Cook happy... document.getElementById('cOriginal').style.borderStyle = "solid"; document.getElementById('cOriginal').style.borderColor = "#C0C0C0 #C0C0C0 #606060 #606060"; document.getElementById('cOriginal').style.visibility = "hidden"; document.getElementById('cOriginal').style.display = "none"; document.getElementById('cPreview').style.borderStyle = "solid"; document.getElementById('cPreview').style.borderColor = "#C0C0C0 #C0C0C0 #606060 #606060"; document.getElementById('cPreview').style.visibility = "visible"; document.getElementById('cPreview').style.display = "block"; //Scroll page to preview image location.hash = "null"; location.hash = "previewAnchor"; } // End Table Click Event Functions Thanks again Link to comment Share on other sites More sharing options...
dsonesuk Posted June 27, 2018 Share Posted June 27, 2018 It would be better to apply this in ALL cases, so you will get into the habit of using this correct method and not have this same issue again! Alternatively as mentioned before use document.getElementById("cPreviewCaption").style.cssText = "font-size:90%; font-weight:550; text-align:center; color:#FFFFFF; padding-top:6px;"; instead, which IS a perfectly acceptable method of adding multiple CSS properties in one go, but will overwrite any previous inline styling already present, instead of adding to present styling. Link to comment Share on other sites More sharing options...
AARRGGHHH Posted June 28, 2018 Author Share Posted June 28, 2018 16 hours ago, dsonesuk said: It would be better to apply this in ALL cases, so you will get into the habit of using this correct method and not have this same issue again! No need for concern, this is one I will not forgot! Thank you for the additional info. :) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now