Angularjs 代码适用于桌面设备 chrome,但不适用于移动设备 chrome
Angularjs code works in desktop chrome, but not in mobile chrome
我已经创建了我在 IONIC 中尝试做的代码笔。
http://codepen.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/Whosebug/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)' 并在控制台中打印“效果良好”,但在 phone 上 canvas 变为白色并且是吗
更新:我刚刚在我的 android 设备上注意到,如果我从我的移动浏览器 (chrome) 运行 codepen 它不起作用。如果我 运行 它在我桌面上的 chrome 里面,它就可以工作。所以它看起来像一个浏览器问题?有办法解决这个问题吗?
找到答案。
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,现在它可以正常工作了
我已经创建了我在 IONIC 中尝试做的代码笔。
http://codepen.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/Whosebug/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)' 并在控制台中打印“效果良好”,但在 phone 上 canvas 变为白色并且是吗
更新:我刚刚在我的 android 设备上注意到,如果我从我的移动浏览器 (chrome) 运行 codepen 它不起作用。如果我 运行 它在我桌面上的 chrome 里面,它就可以工作。所以它看起来像一个浏览器问题?有办法解决这个问题吗?
找到答案。
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,现在它可以正常工作了