畫布不畫在手機鉻，但會畫在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()被調用。你當然可以用你想調用任何其它函數代替回調函數。

希望這會有所幫助。