ios - Certain mobile browsers on iPhone not executing Javascript properly -
i attempting run javascript returned url load in uiwebview. script takes image , draws dot on show users location.
in mobile safari, uiwebview, , google chrome mobile image not generated correctly , dot in wrong place.
in desktop safari, chrome, opera mini, , android version of app works fine.
i need assistance getting work in uiwebview/mobile safari.
problem 1: call context.drawimage() in zoomin() method generates following error in debug console mobile safari: "javascript error. undefined. index_size_err: dom exception 1: index or size negative, or greater allowed value."
problem 2: in zoomout() method, image drawn fine, dot in not in right position.
update: can seen in code below, added console.log statements print out width , height of original image. in offending browsers these values half of should be. i'm trying figure out why.
code:
window.onload = function zoomin() { var canvas = document.getelementbyid("area"); var context = canvas.getcontext("2d"); var imageobj = new image(); var px = 1988; var py = 734; imageobj.src = "image url goes here"; imageobj.onload = function() { canvas.width=640; canvas.height=480; if(px-canvas.width<0 || py-canvas.height<0){ canvas.width=500; canvas.height=300; } console.log(imageobj.height); console.log(imageobj.width); context.drawimage(imageobj, px-canvas.width, py-canvas.height, canvas.width*2, canvas.height*2,0,0,canvas.width,canvas.height); context.beginpath(); context.arc(canvas.width/2, canvas.height/2, 10, 0, 2 * math.pi, false); context.fillstyle = "red"; context.fill(); context.linewidth = 3; context.strokestyle = "black"; context.beginpath(); context.font = "10pt calibri"; context.fillstyle = "black" context.textalign = "center"; context.filltext("you here", canvas.width/2, canvas.height/2+20); context.stroke(); }; document.form1.button2.style.visibility="hidden" document.form1.button1.style.visibility="visible"; }; function zoomout(){ var canvas = document.getelementbyid("area"); var context = canvas.getcontext("2d"); var imageobj = new image(); var px = 1988; var py = 734; imageobj.src = "image url goes here"; imageobj.onload = function(){ canvas.width=imageobj.width canvas.height=imageobj.height context.drawimage(imageobj,0,0); context.arc(px, py, 20, 0, 2 * math.pi, false); context.fillstyle = "red"; context.fill(); context.linewidth = 3; context.strokestyle = "black"; context.beginpath(); context.rect(0, 0, canvas.width, canvas.height); context.font = "15pt calibri"; context.fillstyle = "black"; context.textalign = "center"; context.filltext("you here",px,py+25); context.stroke(); }; document.form1.button1.style.visibility="hidden" document.form1.button2.style.visibility="visible"; }
if have read entire post (excluding code) know discovered dimensions of original image on iphone we're half of in other browsers.
this caused limit apple has placed on size of image can downloaded, 3 megapixels. image larger that. javascript made references parts of image (on ios) we're beyond bounds.
Comments
Post a Comment