Question

我很难过。对于我的生活，我不知道为什么这不适用于Chrome。你可以在这里看到代码：

当我在FF或IE9中提取此代码时，效果很好。您会注意到，小提琴将在Chrome中与渲染元素一起使用，但它不能在小提琴之外工作。

非常感谢任何帮助。这是我第一次尝试使用canvas。

Answer 1

问题似乎是你没有等待加载原始图像元素。如果你稍微改变它，它可以正常工作：

  $(function() {
    var canvas = document.createElement('canvas'),
    canvasExists = !!(canvas.getContext && canvas.getContext('2d')),
    oImage = $('img')[0];

    if (canvasExists) {
      var context = canvas.getContext('2d'), img = new Image();

      img.onload = function() {
        canvas.height = img.height;
        canvas.width = img.width;

        $(oImage).replaceWith(canvas);

        context.drawImage(oImage, 0, 0);
      }

      img.src = oImage.src; 
    } else {
      // apply MS filters
    }

Answer 2

如果你有很多，可能很难使用img.onload。 chrome中等待图像加载的一种简单方法是使用：

$(window).load(function () {

而不是

$(document).ready(function () {

as $（window）.load实际上正在等待加载所有图像。

在画布中使用图像是完美的。（也在firefow和IE工作）

画布图像无法在Chrome中渲染（适用于FF4和IE9）

2 个答案: