Javascript CamanJS-手机-空白画布

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

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

它在所有桌面浏览器上都能正常工作，并且过滤器也能成功应用，但当我在移动设备（如iOS Safari）上尝试时，当我尝试实例化Caman对象时，我现有的canvas#示例变为空白并恢复为原始canvas默认背景色，根本没有加载任何图像。我尝试在画布上绘制图像之前、图像加载之前或画布图像成功绘制之后按需实例化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>

var-caman=null；
功能手柄（evt）{
var target=（evt.target）？evt.target:evt.src元素；
var files=target.files；//文件列表对象
var字段=target.id；
var curCount=target.id.replace（/\D+/，“”）；
for（var i=0，f；f=files[i]；i++）{
var reader=new FileReader（）；
reader.onload=（函数（文件）{
返回函数（e）{
渲染（如目标、结果）；
};
})（f） )；
reader.readAsDataURL（f）；
}
}
函数渲染（imagedata）{
var canvas=document.getElementById（“示例”）；
var ctx=canvas.getContext（“2d”）；
//渲染预览
var previewImage=新图像（）；
previewImage.src=图像数据；
previewImage.onload=函数（）{
ctx.drawImage（预览图像，0，0，previewImage.width，previewImage.height）；
caman=caman（“#sample”，函数（）{this.sunrise（）.render（）；}）；
};
}
函数testProcess（）{
//caman=caman（“#sample”，函数（）{this.sunrise（）.render（）；}）；
if（caman）{
caman.sunrise（）.render（）；
}
}





document.getElementById（'photo'）。addEventListener（'change'，handleUpload，false）；

我也遇到了同样的问题：在Mac上使用Chrome和Safari，但在运行iOS7的iPhone 5s上没有使用Chrome或Safari。我通过将数据caman hidpi disabled属性添加到canvas标记中解决了这个问题

试试这个：

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

根据CamanJS网站：

如果检测到HiDPI显示，CamanJS将自动切换到 HiDPI版本（如果可用），除非使用 数据具有禁用hidpi的属性

---

我发现了一个脏补丁，用来注释视网膜显示的hiDPI比率部分，这使它能够工作，但我不确定这是否是一个好的解决方案，以及它是否会影响其他功能。。基本上只需注释掉下面的JS部分：if（ratio！==1）{……}即使它现在可以工作，但在移动浏览器上也不稳定如果我处理相机照片，它似乎会使包括Safari在内的浏览器崩溃，可能是因为处理高分辨率图片需要太多内存。关于如何有效地处理它们，你有什么想法吗？你现在找到解决方案了吗？不幸的是，当时没有，所以我没有使用这个模块。您可能想查看他们的最新版本，看看问题是否已经解决。非常感谢您分享这些提示，我将测试它！你知道如何最有效地在移动相机照片上运行过滤器吗？它似乎相当滞后。我想将它与Cordova结合使用，或者你知道有什么好的Cordova图像过滤器插件是高效和通用的吗？你添加的过滤器越多，过程就会越慢。我认为没有办法解决这个问题。我在过滤器处理时添加了一个加载程序动画。谢谢！无法理解为什么我的画布是空白的，当你使用浏览器的缩放功能进行缩放时，也可以检测到HiDPI