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

回答

相关问题