Tag: html5 canvas

在canvas上固定ios7压缩图像，旋转和缩放

我遇到了使用canvas在iOS7中被压扁的问题。 我发现以下post似乎正朝着正确的方向前进： HTML5 Canvas drawImage比率错误iOS 但是，我超越了绘制图像的简单情况，在绘制图像之前，我也在旋转和缩放上下文（对于带有EXIF方向数据的缩略图）。 代码会运行，但缩略图中没有图像数据。 我猜这与canvas旋转和缩放有关。 但是，我很难理解为什么当我的挤压因子是1（在没有错误的iOS设备上）时，缩略图不能正确创build。 这是我的完整的“onload（）”代码： reader.onloadend = function(evt) { console.log('read file data!'); var tempImg = new Image(); console.log('created new Image'); tempImg.src = evt.target.result; console.log('set canvas to file'); // alert(this); tempImg.onload = function() { console.log('loaded tempImg'); var MAX_WIDTH = 450; var MAX_HEIGHT = 450; var tempW = tempImg.width; var tempH = […]

在animation之前改进HTML5 Canvas逐帧JPGanimation来完全caching

我试图在这个由Phrogz回答的伟大脚本的基础上构build。 问题是直到所有图像caching在浏览器中，animation才会播放。 因此，在第一次加载它不会玩。 只有在重新加载。 我试图做到这一点是我试图提供一个替代的解决scheme，让animation自动播放，因为该function不能在iOS浏览器中工作。 这是我正在使用的代码： function draw() { var imgNumber = 1; var lastImgNumber = 121; var ctx = canvas.getContext('2d'); var img = new Image; img.onload = function(){ ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height ); ctx.drawImage( img, 0, 0 ); }; var timer = setInterval( function(){ if (imgNumber>lastImgNumber){ clearInterval( timer ); } else{ img.src = […]