Angularjs code工作在桌面版Chrome，而不是在移动铬 [英] Angularjs code works in desktop chrome, but not in mobile chrome
问题描述
我已经创造了什么，我试图做在一个离子codePEN。
I have created a codepen of what I am trying to do in in IONIC.
的http：//$c$cpen.io/anon/pen/yNjmoK
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这是工作。然后，我尝试应用到离子，但它不会起作用。当我点击一个过滤器它会尽可能的code'如果（在此效应）的caman功能，并打印效果好的控制台，但在手机上的画布变成白色，这就是它
Inside the codepen an image is brought in and I apply a filter. Inside the codepen this is working. I then try to apply this into ionic, but it will not work. When I click a filter it goes as far as the code 'if (effect in this)' in the caman function and prints 'Effect is GOOD" in the console, but on the phone the canvas becomes white and that is it.
更新：我刚刚注意到我的Android设备上，如果我从我的手机浏览器（Chrome），这是行不通的运行codePEN。如果我在我的桌面上运行它里面铬它的工作。因此，它看起来像一个浏览器的问题？反正是有解决这个问题？
UPDATE: I have just noticed on my android device if I run the codepen from my mobile browser (chrome) it does not work. If I run it inside chrome on my desktop it does work. So it looks like a browser issue? Is there anyway to fix this?
推荐答案
找到了答案。
如果检测到HiDPI显示，CamanJS将自动切换到
在HiDPI版本，如果可用，除非你强制使用禁用
数据caman-hidpi-disabled属性。
If a HiDPI display is detected, CamanJS will automatically switch to the HiDPI version if available unless you force disable it with the data-caman-hidpi-disabled attribute.
所以我不得不将它设置为true，现在，它正在
So I had to set this to true and now it is working
这篇关于Angularjs code工作在桌面版Chrome，而不是在移动铬的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
