Javascript Android:toDataUrl调用后未检测到触摸事件

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

谢谢

（我现在认为这个答案完全错了。对不起！）

问题是，

toDataURL

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

您可以调用

loadImage

。这将设置

onload（）

处理程序，并将

strFile

分配给

.src

onload

激发并调用

rotateImage

。我们将图像绘制到画布中，然后在

toDataURL

中阻塞一段时间

我们将

toDataURL

的结果分配给

.src

我们返回到步骤2

我们忙于旋转和转换到base64并加载，以至于我们从来没有机会处理事件

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

将图像旋转到屏幕上可见的画布中。这样，您根本不需要

image.src

和

toDataURL

位。（或者，使用css

transform:rotate（90度）；

并且根本不使用javascript进行旋转。跨浏览器时这可能会更棘手）

移除

rotateImage

末尾的

onload

事件处理程序，这样您就不会陷入循环中

使用

canvas.toBlob

和

FileReader.readAsDataURL

而不是

canvas.toDataURL

，因此一切都是好的、异步的。请注意，chrome尚未实现toBlob，因此这可能没有多大帮助

---

这似乎是android 4.1之前版本中的一个bug：

---

超短版本是触摸事件不能很好地与滚动配合使用。建议在触摸事件处理程序中调用e.preventDefault（）（现已修复），因此没有循环。CSS是另一种选择，但是我用来移动和调整图像大小的图像位置属性不会随着

变换而改变，这对于下一行来说是个问题。直接使用画布不是一个选项，因为存在
touch
事件的bug。谢谢。
标签真的不会触发触发事件吗？这很奇怪。问题发生在哪个android版本上？您是否尝试过在
画布上放置
来监听触摸事件？我不确定你的论点是
moveImage（）
会阻止循环的形成；
moveImage（）
是否分配给
.src
？处理
touchstart
和
touchend
事件时会出现问题，但相同的代码在
事件中工作正常。函数
moveImage（）
仅设置
元素的位置。没有循环和挂起，因为应用程序在显示旋转图像后仍在工作。我将测试
想法。谢谢。使用
旋转/显示
中的图像以处理
触摸事件，而不是使用
效果很好。然而，这意味着许多新代码。我不检查问题是否已解决，因为原始问题仍然存在。谢谢。我以为这只是一个
canvas
问题。谢谢
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);