Question

我已经在IONIC中创建了一个我想要做的代码。

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中，这是有效的。然后我尝试将其应用于离子，但它不起作用。当我点击一个过滤器时，它会尽可能地代码＆＃39; if（效果在此）＆＃39;在caman函数和打印效果是好的＆＃34;在控制台中，但在手机上画布变成了白色，就是这样。

更新：我刚刚在我的Android设备上注意到，如果我从我的移动浏览器（chrome）运行codepen它不起作用。如果我在桌面上的chrome中运行它确实有效。它看起来像浏览器问题？无论如何要解决这个问题吗？

Answer 1

找到答案。

如果检测到HiDPI显示，CamanJS将自动切换到 HiDPI版本如果可用，除非您强制禁用它 data-caman-hidpi-disabled属性。

所以我必须将其设置为true，现在它正在运行

Angularjs代码适用于桌面chrome，但不适用于移动Chrome

1 个答案: