CamanJS - 移动 - 空白画布

Question

我在移动设备（即 iPad 和 iPhone 的 Safari/Chrome）上运行 CamanJS 脚本时遇到问题，我已经尝试解决了好几天。

测试脚本很简单： 1) 接受图像的浏览器文件选择 2) 使用 FileData 获取图像源，然后将其绘制到画布中，然后实例化一个 Caman("#sample") 对象 3）运行一些过滤器（在该图像的onLoad中，或通过单击按钮手动）

它在所有桌面浏览器上都运行良好，过滤器也成功应用，但是当我在 iOS Safari 等移动设备上尝试它时，当我尝试实例化 Caman 对象时，我现有的画布 #sample 变为空白并恢复到原始画布默认背景颜色，根本没有加载图像。我已经尝试在画布上绘制图像之前、图像 onLoad 或画布图像成功绘制后按需实例化 Caman 对象，但最终结果仍然相同 - 画布变为空白。

以下是我的示例代码，有人可以建议吗？感谢您的热心帮助。

<script>
var caman = null;

function handleUpload(evt) {
    var target = (evt.target) ? evt.target : evt.srcElement;
    var files = target.files; // FileList object
    var field = target.id;
    var curCount = target.id.replace(/\D+/, "");

    for (var i = 0, f; f = files[i]; i++) {
        var reader = new FileReader();
        reader.onload = (function(theFile) {
            return function(e) {
                renderImage(e.target.result);
            };
        })(f);

        reader.readAsDataURL(f);
    }
}

function renderImage(imagedata) {
    var canvas = document.getElementById("sample");
    var ctx = canvas.getContext("2d");

    // Render Preview
    var previewImage = new Image();
    previewImage.src = imagedata;
    previewImage.onload = function() {
    ctx.drawImage(previewImage, 0, 0, previewImage.width, previewImage.height);
        caman = Caman("#sample", function () { this.sunrise().render(); });
    };
}

function testProcess() {
    //caman = Caman("#sample", function () { this.sunrise().render(); }); 
    if (caman) { 
        caman.sunrise().render();
    }
}

</script>


<form>
<input id="photo" name="photo" value="" type=file size="30" maxlength="50">
</form>

<canvas id="sample" width=300 height=300 style="background-color: #aaaaaa;"></canvas>

<br><br><a href="javascript:void(0);" onClick="testProcess();">Test Process</a><br><br>

<script>
document.getElementById('photo').addEventListener('change', handleUpload, false);
</script>

Answer 1

我遇到了同样的问题：在我的 Mac 上的 Chrome 和 Safari 上工作，但在运行 iOS7 的 iPhone 5s 上的 Chrome 或 Safari 上没有工作。我通过将 data-caman-hidpi-disabled 属性添加到我的画布标签来解决。

试试这个：

<canvas id="sample" width=300 height=300 style="background-color: #aaaaaa;" data-caman-hidpi-disabled="true"></canvas>

根据 CamanJS 网站：

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

http://camanjs.com/guides/#BasicUsage