Angularjs code works in desktop chrome, but not in mobile chrome

问题

I have created a codepen of what I am trying to do in in 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/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");
      }
    });

  };
});

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.

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?

回答1:

Found the answer.

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.

So I had to set this to true and now it is working

来源：https://stackoverflow.com/questions/31373993/angularjs-code-works-in-desktop-chrome-but-not-in-mobile-chrome

标签

angularjs

html5

google-chrome

ionic-framework

camanjs