CamanJS-手机-空白画布

Question

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

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

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

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