画布不画在手机铬，但会画在Safari上

Question

我有下面的脚本，需要一个图像，并绘制一个基于图像背景颜色的画布（该图像使用PHP从数据库加载），我要求它是它在移动Safari浏览器上工作，但不在Chrome上：

在某些分辨率下，画布将从波形回退到正方形，并且每当窗口宽度发生变化（移动设备旋转时增加此宽度）时也调整大小。

我必须注意，这个脚本适用于页面上的移动设备上，我没有从图像中获取颜色，并且我静态设置该颜色，导致我认为这是由于图像尚未加载。

<script> 

    function drawCatWave() { 
     window.onload = function() { 
      var catImg = new Image(); 
      catImg.src = "/product_images/<?php echo $row_category['logo_colour']; ?>"; 
      var context; 
      context = document.getElementById('cat-image').getContext('2d'); 
      context.drawImage(catImg, 20, 20, 130, 100); 
      pixData = (context.getImageData(20, 20, 1, 1).data); 

      rgb1 = pixData[0].toString(); 
      rgb2 = pixData[1].toString(); 
      rgb3 = pixData[2].toString(); 
      rgb4 = pixData[3].toString(); 

      var rgbString = rgb1 + "," + rgb2 + "," + rgb3 + "," + rgb4; 
      var rgb = "rgba(" + rgbString + ")"; 
      $('.cat-prod-box h2').css("color", rgb); 


      console.log(rgb1, rgb2, rgb3); 
      canvas = document.getElementById("canvas"); 
      var parent = document.getElementById("cat-banner-wave"); 
      ctx = canvas.getContext("2d") 
      canvas.width = parent.offsetWidth; 
      canvas.height = parent.offsetHeight; 
      var actWidth = canvas.width; 
      var actHeight = canvas.height; 

      canvas.height = 380; 
      ctx.lineWidth = 6; 
      ctx.strokeStyle = "rgba(" + rgbString + ")"; 
      ctx.beginPath(); 
      ctx.moveTo(0, 70); 
      ctx.bezierCurveTo((actWidth/2), -200, (actWidth/3), 445, actWidth, 100); 
      ctx.bezierCurveTo(actWidth, 333, actWidth, 333, actWidth, 333); 
      ctx.bezierCurveTo(0, 333, 0, 333, 0, 333); 
      ctx.closePath(); 
      ctx.fillStyle = rgb; 

      ctx.fill(); 
      ctx.stroke(); 



     }; 
    } 

    function drawCatSquare() { 
     window.onload = function() { 
      var catImg = new Image(); 
      catImg.src = "/product_images/<?php echo $row_category['logo_colour']; ?>"; 
      var context; 
      context = document.getElementById('cat-image').getContext('2d'); 
      context.drawImage(catImg, 20, 20, 130, 100); 
      pixData = (context.getImageData(20, 20, 1, 1).data); 

      rgb1 = pixData[0].toString(); 
      rgb2 = pixData[1].toString(); 
      rgb3 = pixData[2].toString(); 
      rgb4 = pixData[3].toString(); 

      var rgbString = rgb1 + "," + rgb2 + "," + rgb3 + "," + rgb4; 
      var rgb = "rgba(" + rgbString + ")"; 

      $('.cat-prod-box h2').css("color", rgb); 


      console.log(rgb1, rgb2, rgb3); 
      canvas = document.getElementById("canvas"); 
      var parent = document.getElementById("cat-banner-wave"); 
      ctx = canvas.getContext("2d") 
      canvas.width = parent.offsetWidth; 
      canvas.height = parent.offsetHeight; 
      var actWidth = canvas.width; 
      var actHeight = canvas.height; 

      canvas.height = 380; 
      ctx.lineWidth = 6; 
      ctx.strokeStyle = "rgba(" + rgbString + ")"; 
      ctx.rect(0, 0, actWidth, actHeight); 
      ctx.fillStyle = rgb; 

      ctx.fill(); 
      ctx.stroke(); 


     }; 
    } 

    $(document).ready(function() { 
     if($(this).width() > 500){ 
      drawCatWave(); 
     }else{ 

      drawCatSquare(); 
     } 
    }); 

    $(window).resize(function() { 
     if ($(this).width() > 500) { 
      drawCatWave(); 
     } else { 
      drawCatSquare(); 
     } 
    }); 



</script> 

Answer 1

问题

这里有几个问题：

• 要放置在window.onload你的两个函数中
• 你是不是等待图像加载
• 您将获得与在画布上绘制订单相关的竞赛条件

个

解决方案

首先，将所有的代码，而不是window.onload里面：

window.onload = function() { 

    function drawCatWave() { 
     ... 
    } 

    function drawCatSquare() { 
     ... 
    } 

} 

当DOM和现有的DOM图像加载在window.onload调用。但是当你在代码中动态地创建一个图像元素这已被调用，它将不适用。你将不得不手动处理图像加载（见下文）。

使用window.onload的另一种方法是将脚本放在页面底部的body关闭标记之前。

其次，如前所述，您需要等待图像加载才能继续。这是因为图像加载是异步的，所以当浏览器连接并下载图像数据时，代码会继续执行其他指令。如果图像未及时加载，drawImage()方法将中止并且结果为“空白”画布。

一般来说，你这样做是为了处理图像加载：如果你想画到你需要产业链的调用或同一帆布

function drawCatWave() { 
    var catImg = new Image(); 
    catImg.onload = catDone; 
    catImg.src = "/product_images/<?php echo $row_category['logo_colour']; ?>"; 

    function catDone() { 
     var context; 
     context = document.getElementById('cat-image').getContext('2d'); 
     context.drawImage(catImg, 20, 20, 130, 100); 
     ... etc ... 
    } 
} 

现在：

var image = new Image; 
image.onload = callbackFunction; 
image.src = '...'; 

所以在这种情况下，您可以根据首先加载哪个图像进入竞赛状态。

为了处理这种情况有回调参数扩展您的功能：

function drawCatWave(callback) { 
     ... 
    } 

    function drawCatSquare(callback) { 
     ... 
    } 

，并允许修改代码的函数内（只显示了一个）：

function drawCatWave (callback) { 
    var catImg = new Image(); 
    catImg.onload = catDone; 
    catImg.src = "/product_images/<?php echo $row_category['logo_colour']; ?>"; 

    function catDone() { 
     var context; 
     context = document.getElementById('cat-image').getContext('2d'); 
     context.drawImage(catImg, 20, 20, 130, 100); 
     ... etc ... 

     callback(); /// callback is invoked here 
    } 
} 

现在我们可以做到这一点：

drawCatWave(drawCatSquare); 

这里drawCatWave()首先被调用，当图像公顷š加载和图像绘制的drawCatSquare()被调用。你当然可以用你想调用任何其它函数代替回调函数。

希望这会有所帮助。