Angularjs代碼適用於桌面Chrome，但不適用於移動Chrome

我在IONIC中創建了一個我正在嘗試做的代碼。Angularjs代碼適用於桌面Chrome，但不適用於移動Chrome

HTML：

<html ng-app="myApp"> 

<head> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/camanjs/4.0.0/caman.full.min.js"> 
    </script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> 
    </script> 
</head> 

<body ng-controller="myCtrl"> 
    <div id="photo"> 
    <canvas id="canvas" width="400" height="400" style="border:1px solid #d3d3d3;"></canvas> 
    </div> 
    <div id="filterContainer"> 
    <ul id="filters"> 
     <li> <a href="#" id="normal" ng-click="applyFilter($event)">Normal</a> </li> 
     <li> <a href="#" id="vintage" ng-click="applyFilter($event)">Vintage</a> </li> 
     <li> <a href="#" id="lomo" ng-click="applyFilter($event)">Lomo</a> </li> 
     <li> <a href="#" id="clarity" ng-click="applyFilter($event)">Clarity</a> </li> 
    </div> 

</body> 

</html>

JS：

var app = angular.module('myApp', []); 

app.controller('myCtrl', function($scope) { 

    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 
    var image = new Image(); 
    image.onload = function() { 
    context.drawImage(image, 0, 0, 460, 460); 
    }; 
    image.crossOrigin = "anonymous"; 
    image.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png"; 

    $scope.applyFilter = function(event) { 

    // Clone the canvas 
    var clone = canvas.cloneNode(true); 
    // Clone the image stored in the canvas as well 
    clone.getContext('2d').drawImage(canvas, 0, 0, 400, 400); 

    var theParent = document.getElementById("photo"); 
    theParent.removeChild(document.getElementById('canvas')); 
    theParent.appendChild(clone); 

    var effect = String(event.target.id).trim(); 

    Caman(clone, function() { 

     // If such an effect exists, use it: 

     if (effect in this) { 

     console.log("Effect GOOD"); 
     this[effect](); 
     this.render(); 

     } else { 
     console.log("Effect ERROR"); 
     } 
    }); 

    }; 
});

裏面的codepen的圖像帶來了我申請一個過濾器。在codepen裏面這是工作。然後我嘗試將其應用於離子，但它不起作用。當我點擊一個過濾器時，它的效果就像caman功能中的代碼'if（effect in this）'，並在控制檯中打印'Effect is GOOD'，但在手機上，畫布變成白色，就是這樣。「

更新：我剛剛注意到在我的android設備上，如果我從我的移動瀏覽器（鉻）運行codepen它不起作用。如果我在我的桌面上運行它在鉻內部它確實工作，所以它看起來像一個瀏覽器問題？在那裏如果檢測到HiDPI顯示反正解決這一問題？

來源

2015-07-13 user2924127

我不認爲這是有角的問題;我懷疑它與移動瀏覽器如何處理'

我有同樣的問題，但我只是使用角。該代碼使用ngFor over JSON數組。它適用於桌面Chrome或Firefox，但不適用於Android Chrome或Firefox。 CoolPad手機上的Android版本5。我不使用CamanJS，所以如何禁用與純角度hidpi？ –

找到了答案。

，CamanJS會自動切換到的HiDPI版本，如果不得要領除非您強制使用 data-caman-hidpi-disabled屬性禁用它。

所以我不得不將它設置爲真，現在它正在

來源

2015-07-13 17:07:29 user2924127

如果你還在這裏：你是否也面臨着使用角度「camanjs」過濾大圖片的速度問題？它需要14秒鐘才能在2000 x 2000圖片上執行復古濾鏡。 – Mulgard

@Mulgard我改變了路線。儘管我討厭承認它，但混合應用程序並沒有執行這些類型的操作的能力，所以我轉而使用本機代碼進行開發。它實際上節省了我在開發中的時間，因爲我不必花費數天的時間來嘗試製作某些cordova和其他javascript代碼。 – user2924127

是的，我知道。我更喜歡android和im一個非常好的android開發人員。但如果客戶想要混合動力車，他會得到混合動力車：D – Mulgard

Angularjs代碼適用於桌面Chrome，但不適用於移動Chrome

回答

相關問題