ios html5游戏开发教程,iOS HTML5 Canvas toDataURL

I need some assistance. We seem to be having an issue with iOS with regards to getting the base64 of an image via HTML 5 / Canvas. Everything works fine if we use the default height / width of the canvas or hard code the height and width. However if we set the canvas height / width to that of the image src then the image won’t load into the canvas and therefore we won’t get the image as base64.

Code snippet which works: function convertImageToBase64(imgUrl, callback) { var canvas = document.createElement("canvas"); var context = canvas.getContext('2d'); // load image from data url var imageObj= new Image(); imageObj.onload = function () { var dataUrl; context.drawImage(imageObj, 0, 0, canvas.width, canvas.height); dataUrl = canvas.toDataURL("image/png"); callback.call(this, dataUrl); canvas = null; }; imageObj.src = imgUrl; }

Code snippet which does not work on iOS but does work on Android: function convertImageToBase64(imgUrl, callback) { var canvas = document.createElement("canvas"); var context = canvas.getContext('2d'); // load image from data url var imageObj= new Image(); imageObj.onload = function () { var dataUrl; canvas.width = imageObj.width; canvas.height = imageObj.height; context.drawImage(imageObj, 0, 0, canvas.width, canvas.height); dataUrl = canvas.toDataURL("image/png"); callback.call(this, dataUrl); canvas = null; }; imageObj.src = imgUrl; }

We need to be able to establish the canvas height / width based upon the image itself.

Any guidance or assistance is most appreciated.