onload 不会在 Firefox 中使用 createObjectURL img.src 触发
onload is not firing with createObjectURL img.src in Firefox
我有以下代码。它完全可以正常工作,并且正如预期的那样,在Chrome中。但是,在Firefox中,它记录了"转换",但从未记录"加载"。没有JS错误或任何东西。加载只是不触发。我似乎在谷歌或堆栈溢出上找不到太多。许多人说加载不会为缓存的图像触发,但这些不应该被缓存,即使它们是,我也无法缓存破坏它们(对吧?
flattenImage: function(file, callback){
// Safari uses webkitURL
var URL = window.URL || window.webkitURL;
var canPreformat = !!(window.Blob && window.Uint8Array && URL && URL.createObjectURL);
// If we have all features we need to preformat on the client and the image
// isn't already flattened (jpeg), DO IT
if (canPreformat && !file.type.test(/jpe?g/i)) {
console.log('CONVERT');
var thiz = this;
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var img = new Image;
// Makes a blob URL from the file given.
img.onload = function() {
console.log('LOADED');
c.width = this.width;
c.height = this.height;
// Take the img that was added and copy it to the canvas
ctx.drawImage(img, 0, 0);
// Put the image on top of everything else
ctx.globalCompositeOperation = 'destination-atop';
// Any transparency should become white (instead of the default black)
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, this.width, this.height);
// Save canvas as a base64'd jpeg
var dataURL = c.toDataURL("image/jpeg");
// The following blob lines take the base64 encoded image and then
// convert it to a jpeg "file". This allows us to do a real file
// upload rather than needing to send a base64 string.
var blobBin = atob(dataURL.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
array.push(blobBin.charCodeAt(i));
}
callback.call(thiz, new Blob([new Uint8Array(array)], {type: 'image/jpeg'}));
}
img.src = URL.createObjectURL(file);
}
// If we don't have all the features just return the same file given to us
else {
console.log('NOPE')
callback.call(this, file);
}
}
我通过使用createObjectURL而是像这样使用FileReader来解决这个问题:
flattenImage: function(file, callback){
// Safari uses webkitURL
var URL = window.URL || window.webkitURL;
var canPreformat = !!(window.FileReader && window.Blob && window.Uint8Array);
// If we have all features we need to preformat on the client and the image
// isn't already flattened (jpeg), DO IT
if (canPreformat && !file.type.test(/jpe?g/i)) {
console.log('CONVERT');
var thiz = this;
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var reader = new FileReader();
var img = new Image;
// Once the image is loaded from FileReader set the src of the image to
// the base64'd result. This will trigger the img.onload
reader.onload = function (ev) {
img.src = ev.target.result;
};
// Makes a blob URL from the file given.
img.onload = function() {
console.log('LOADED');
c.width = this.width;
c.height = this.height;
// Take the img that was added and copy it to the canvas
ctx.drawImage(img, 0, 0);
// Put the image on top of everything else
ctx.globalCompositeOperation = 'destination-atop';
// Any transparency should become white (instead of the default black)
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, this.width, this.height);
// Save canvas as a base64'd jpeg
var dataURL = c.toDataURL("image/jpeg");
// The following blob lines take the base64 encoded image and then
// convert it to a jpeg "file". This allows us to do a real file
// upload rather than needing to send a base64 string.
var blobBin = atob(dataURL.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
array.push(blobBin.charCodeAt(i));
}
callback.call(thiz, new Blob([new Uint8Array(array)], {type: 'image/jpeg'}));
}
reader.readAsDataURL(file);
}
// If we don't have all the features just return the same file given to us
else {
callback.call(this, file);
}
}
相关文章:
- 如何更改<svg>标记为<img>用js标记
- 有没有一种方法可以防止img get请求使用css或js发生
- Javascript:使用绝对路径设置img src
- Setting default onclick behavior for <img> tag in gene
- 如何在页面加载中使用Jquery/Javascript确定img源
- 图像可以从源<img src=""/>.TEXT可以在没有javascript的情况下从外部
- 使用AngularJs时,如何在img标记具有src-attr时设置数据src
- 插入“;img src"在javascript中
- 检索MongoDB binData并显示为<img>src
- addEventListener的Javascript代码不工作!?(单击时打开放大的img)
- 手柄'img'单击事件并插入'alt'使用jQuery将属性转换为文本框
- Reactjs URL.createObjectURL不是函数
- 限制对HTML/CSS/IMG或根索引文件夹的访问
- 使用javascript或angularjs特定过滤器搜索字符串中第一个img标记的json值
- 为img设置高度和宽度
- 替换与单词'匹配的文本字符;购物车'替换为img图标
- 我应该如何在 UL 内触发 IMG 标签的点击
- AngularJS提取物<img>来自JSON
- onload 不会在 Firefox 中使用 createObjectURL img.src 触发
- 从img标记(与URL.createObjectURL相反的方法)获取来自(blob)的图像数据