Safari 上的 FileReader 即将启动
FileReader on safari firing to soon
我正在制作一个多部分 html 问卷形式的表格,其中有很多文本问题和一些图片。在用户选择图像的问题上,我创建了一个 canvas 元素并在文件输入下方显示调整大小的图像。
if (window.FileReader)
{
var file = element.files[0];
var $input = $(element);
var $fileName = file.name;
var reader = new FileReader();
reader.onload = function(e) {
var img = document.createElement("img");
img.src = e.target.result;
var dataID = $input.data("questionId");
var canvasID = "canvas_" + dataID;
$("#"+canvasID).remove();
var canvas = document.createElement("canvas");
canvas.setAttribute("id", canvasID);
canvas.setAttribute("height", "200");
canvas.setAttribute("width", "200");
var heightWidth = getHeightWidth(img);
canvas.height = heightWidth[0];
canvas.width = heightWidth[1];
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0, canvas.width, canvas.height);
var sectionID = "section_" + dataID;
$("#" + sectionID).append(canvas);
$("#file_title-" + dataID).val($fileName);
}
reader.readAsDataURL(file);
}
else
{
alert("This browser does not support image uploading.");
}
这在 chrome 中工作正常,但在桌面上的 safari (safari 8.x) 或 iOS 中无效。我的代码中的问题是,在 Safari 上它来自 getHeightWidth() 的 returns height=0 width=0 这让我认为 img 还没有准备好被处理。这个理论得到了进一步验证,因为如果我换一张新图片,然后再换回原来的图片,它就能正常显示。
我真的不知道从哪里开始,非常感谢任何调试帮助。谢谢大家
该代码假设图像加载是同步的,但它是异步的,即使使用数据 URI 也应该如此假设。如果图像未正确加载,其宽度和高度属性将为 0。
您可以通过为 img
添加一个 onload
处理程序来解决这个问题,然后将用于检测和设置大小的代码移到该处理程序中(还请记住添加一个 onerror 处理程序,以防万一图像文件已损坏)。
我正在制作一个多部分 html 问卷形式的表格,其中有很多文本问题和一些图片。在用户选择图像的问题上,我创建了一个 canvas 元素并在文件输入下方显示调整大小的图像。
if (window.FileReader)
{
var file = element.files[0];
var $input = $(element);
var $fileName = file.name;
var reader = new FileReader();
reader.onload = function(e) {
var img = document.createElement("img");
img.src = e.target.result;
var dataID = $input.data("questionId");
var canvasID = "canvas_" + dataID;
$("#"+canvasID).remove();
var canvas = document.createElement("canvas");
canvas.setAttribute("id", canvasID);
canvas.setAttribute("height", "200");
canvas.setAttribute("width", "200");
var heightWidth = getHeightWidth(img);
canvas.height = heightWidth[0];
canvas.width = heightWidth[1];
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0, canvas.width, canvas.height);
var sectionID = "section_" + dataID;
$("#" + sectionID).append(canvas);
$("#file_title-" + dataID).val($fileName);
}
reader.readAsDataURL(file);
}
else
{
alert("This browser does not support image uploading.");
}
这在 chrome 中工作正常,但在桌面上的 safari (safari 8.x) 或 iOS 中无效。我的代码中的问题是,在 Safari 上它来自 getHeightWidth() 的 returns height=0 width=0 这让我认为 img 还没有准备好被处理。这个理论得到了进一步验证,因为如果我换一张新图片,然后再换回原来的图片,它就能正常显示。
我真的不知道从哪里开始,非常感谢任何调试帮助。谢谢大家
该代码假设图像加载是同步的,但它是异步的,即使使用数据 URI 也应该如此假设。如果图像未正确加载,其宽度和高度属性将为 0。
您可以通过为 img
添加一个 onload
处理程序来解决这个问题,然后将用于检测和设置大小的代码移到该处理程序中(还请记住添加一个 onerror 处理程序,以防万一图像文件已损坏)。