javascript - CamanJS - 移动 - 空白 Canvas

Question

我在移动设备(即 iPad 和 iPhone 的 Safari/Chrome)上运行 CamanJS 脚本时遇到问题，几天来我一直在努力解决这个问题。

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

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

下面是我的示例代码，有人可以指点一下吗？感谢您的帮助。

<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 标签来解决。

试试这个:

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

根据 CamanJS 网站:

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.

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