Tag: canvas

上传到服务器之前使用canvas调整Iphone图像的大小: 在上传到我们的服务器之前，我们使用Canvas调整Iphone / IPAD上的图像大小。在iPhone 4S和5上，当使用FRONT相机以横向模式拍摄照片时，resize工作正常。在纵向模式下拍摄时，图像被压扁约1/4。但是，当用后置摄像头拍摄时，所有图像（包括风景和肖像）都会被挤压在7/8左右，只留下一条细腰带。在IPAD和IPOD上，前后摄像头是一样的：风景图像很好，但是肖像图像被压扁了1/4。我们尝试了几种不同的resizealgorithm，但结果相同。任何想法如何解决这个问题？

Canvas.toDataURL不适用于移动Safari iOS？: 我尝试了以下。我从一个SVG图像创build一个<img> 。然后我画在canvas上，最后导出为PNG，并将生成的PNG设置为新的<img> 。它适用于Android，Chrome，Safari，FireFox。但是， canvas.toDataUrl()不适用于iOS上的移动Safari。它只在你不使用canvas上的SVG图像时才起作用。这里是我用来testing的代码： <div id="mydiv"></div> <img id="image2"> var mydiv = document.getElementById('mydiv'), image2 = document.getElementById('image2'); image2.crossOrigin="anonymous"; var image3 = new Image(); mydiv.appendChild(image3); image3.onload = function() { var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); canvas.width = image3.width; canvas.height = image3.height; ctx.drawImage(image3,0,0, canvas.width, canvas.height); var dataUrl = canvas.toDataURL('image/png'); image2.src = dataUrl; […]

iOS HTML5 Canvas toDataURL: 我需要一些帮助。我们似乎有问题与iOS通过HTML 5 / Canvas获取图像的base64。如果我们使用canvas的默认高度/宽度或硬编码高度和宽度，一切正常。但是，如果我们将canvas高度/宽度设置为图像的src，那么图像将不会加载到canvas中，因此我们不会将图像作为base64。其中的代码片段： 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; } […]

Android上的HTML5 canvasanimation很慢: 我正在开发和Android和iOS的街机游戏。我在运行Android 2.2.1的Galaxy S SL上有一个animation性能问题：看例子： http://jsfiddle.net/qgWdA/show/ 编辑代码： http://jsfiddle.net/qgWdA/ 在运行Android 4.0.3的Galaxy S2上，animation速度更快，但不如iphone 4S runnig iOS 5.1.1。有没有什么办法来优化它？

确定照片在JavaScript中的方向？: 我们使用FileReader从iPhone上拍摄的照片中获取图像到浏览器中。然后，我们使用drawImage()将该图像绘制到canvas 。问题是在iPhone上显示的照片在页面上旋转。我们无法在任何Android设备上重现此操作。我们可以很容易地旋转canvas上的图像，但我们如何确定所需的旋转？我们尝试了一些用于JavaScript的EXIF阅读库（ exif.js ），但无法成功读取方向。