Question

对不起我的英语，我来自阿根廷。我正在使用Eclipse开发HTML5应用程序。当程序在IMG元素上加载图像时，会正确检测到事件 touchstart ， touchmove 和 touchend 。但是当我需要旋转图像时，我使用CANVAS和 toDataUrl（）方法，然后似乎没有检测到触摸事件。我使用的源代码是这样的（考虑所有对象，变量和函数声明良好）：

var context = canvas.getContext("2d");

function loadImage(strFile, intDeg) {
  if (intDeg == 90) image.onload = function() { rotateImage(); };
  imagePhoto.src = strFile;
}

function rotateImage() {
  image.onload = function() { moveImage(); };
  canvas.width = image.height;
  canvas.height = image.width;
  context.translate(canvas.width, 0);
  context.rotate(90 * Math.PI / 180);
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
  context.restore();
  image.src = canvas.toDataURL("image/png");
}

image.addEventListener("touchstart", downEvent, true, true);
image.addEventListener("touchmove", moveEvent, true, true);
image.addEventListener("touchend", upEvent, true, true);

谢谢！

Answer 1

（我现在认为这个答案完全是错误的。抱歉！）

问题是，toDataURL是一个同步的阻塞API调用。这意味着当它正在运行时，浏览器不会监听其他任何内容。这是我对正在发生的事情的猜测：

您致电loadImage。这会设置onload()处理程序并将strFile分配给.src
onload点击并致电rotateImage。我们将图像绘制到画布中，然后在toDataURL中阻挡一段时间。
我们将toDataURL的结果分配给.src
我们返回第2步。

我们正忙于轮换并转换为base64并加载我们从未有机会处理事件。

三种可能的修复，按优先顺序排列：

将图像旋转到屏幕上可见的画布。这样，您根本不需要image.src和toDataURL位。（或者，使用css transform: rotate(90deg);并且根本不在javascript中进行旋转。这可能比较棘手的跨浏览器）
删除onload末尾的rotateImage事件处理程序，这样就不会卡在循环中。
使用canvas.toBlob和FileReader.readAsDataURL代替Canvas.toDataURL，所以一切都很好并且异步。请注意，Chrome尚未实现toBlob，因此这可能没那么有用。

Answer 2

在4.1之前看起来这是android中的一个错误：http://developersday.wordpress.com/2012/08/17/missing-events-touchstartmoveend-and-scroll-on-android-4-0-x-and-earlier/

超短版本是触摸事件在滚动时不能很好地发挥作用。 http://code.google.com/p/android/issues/detail?id=19827建议在触摸事件处理程序中调用e.preventDefault（）。

Android：触摸toDataUrl调用后未检测到的事件

2 个答案: