- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在创建一个应该能够接受至少 1000 张图像的图像 uploader 。用户选择/拖放图像后,应显示图像以供预览。然后,用户将点击上传按钮开始上传。
我已经实现了全部功能,它在 Chrome 上运行起来非常棒。但这在 Firefox 中失败了。
我创建了一种排队机制,一旦用户选择图像,在某个时间点只有 n 个图像会被加载到浏览器中。
超过 20 张图像也会发生崩溃(即使使用排队机制创建一批 1 张图像)。我在 Firefox 中使用选项卡内存使用插件(http://mybrowseraddon.com/tab-memory.html)检查了内存使用情况。它甚至会因为 40 MB 的内存使用而崩溃。所以我想,这不是因为任何内存泄漏。
function readAndDisplay(file, index){
id = getFileId(file);
reader = new FileReader();
reader.onload = function (e) {
addImageCard(file, index);
resizeImage(e, index);
delete this;
//$('#image' + id).attr('src', e.target.result);
}
reader.readAsDataURL(file);
}
function resizeImage(fileReaderEvent, index){
var img = new Image();
img.onload=function(){
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
var canvas = document.getElementById("image" + index);
var ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
img.src = "";
delete canvas;
delete ctx;
img = null;
delete fileReaderEvent;
uploadQueue.push(index);
if(loadImageIterator < updatedFiles.length){
loadImage(updatedFiles[loadImageIterator++]);
}
else{
updatedFiles = [];
}
}
img.src = fileReaderEvent.target.result;
var md5 = CryptoJS.MD5(fileReaderEvent.target.result).toString();
console.log(md5);
}
function addImageCard(file, index){
imageHolder = $("#imageholder");
imageCard = $("<div>", {
class: "col m1 s4",
id: "card" + index
});
innerDiv = $("<div>", {
class: "card"
});
cardImage = $("<div>", {
class: "card-image",
}).append($("<canvas>", {
id: "image" + index,
css: {
width: "100%"
}
//src: "images/sample-1.jpg"
})).append($("<span>", {
class: "card-title",
text: ""
}));
cardContent = $("<div>",{
class: "card-content",
html: "<p>" + file.name + "</p>"
});
cardAction = $("<div>", {
class: "card-action"
});
removeButton = $("<a>", {
title: "Remove",
css: {
"font-size": "20px"
},
click: function(){
remove(index)
}
}).append($("<span>", {
class: "glyphicon glyphicon-remove-circle"
}));
uploadButton = $("<a>", {
title: "Upload Now",
css: {
"font-size": "20px",
float: "right",
"margin-right": "4px"
}
}).append($("<span>", {
class: "glyphicon glyphicon-cloud-upload"
}));
cardAction.append(removeButton);
cardAction.append(uploadButton);
innerDiv.append(cardImage);
innerDiv.append(cardContent);
innerDiv.append(cardAction);
imageCard.append(innerDiv);
imageHolder.append(imageCard);
}
当我评论以下代码时,Firefox 不会崩溃 ctx.drawImage(img, 0, 0, 宽度, 高度)
到目前为止,我认为问题出在这个 drawImage 上。可能 drawImage 的实现在 Chrome 和 Firefox 中是不同的,我使用它的方式使它在 Chrome 中工作,但在 Firefox 中,它会抛出错误。
有没有人对为什么会发生这个问题有任何具体的想法?
JSFiddle- http://jsfiddle.net/sanchit235/7xh1gbj6/
Firefox 崩溃报告- https://crash-stats.mozilla.com/report/index/6107c530-12a1-4aea-96c9-0366c2151010
最佳答案
您的代码中存在一些问题:
第一个是你同步调用了loadImage()
在 FileSelectHandler()
的 for 循环中(onchange) 本身回调 loadImage()
如果循环未完成,则在绘图完成后异步(在我的 comp 上,20 张图像出现 15 次)。
仅在 onchange 上调用一次并让异步回调就足够了。
第二个正在检查回调:
if(loadImageIterator < updatedFiles.length){
loadImage(updatedFiles[loadImageIterator++]);
}
应替换为
if(++loadImageIterator < updatedFiles.length){
loadImage(updatedFiles[loadImageIterator]);
}
或者第一个电话将通过 updatedFiles[0]
.
第三个是您的变量声明。你忘了 var
之前 reader
, newFile
和其他一些,创建这些全局变量。
这是 corrected fiddle这不会在 Chrome 或 FF 中引发任何错误,而不会自行删除任何内容。
关于javascript - 多个图像的 context.drawImage 最终导致 FireFox 崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33053444/
我使用缓冲方法更新 Canvas ,问题是当我在缓冲 Canvas 中绘制图像并将其应用于真实 Canvas 时,真实 Canvas 上没有图像。但我可以将任何其他东西应用到真正的 Canvas 上。
好的,我正在使用 JavaScript Canvas 元素等创建一个游戏。我已经能够加载大量图像,但在选定的少数图像上,JavaScript 会回复错误,例如 Uncaught TypeError:
我的 Canvas 有一个简单的绘制图像,但它不会显示在第一帧上。 这让我发疯,我不知道为什么它不会这样做!! 这是我的脚本: img = new Image(); img.src = 'images
我正在尝试在我的代码上调用 DrawImage(),我正在遵循本教程 Jetpack Tutorial , 但我收到此错误: Unresolved reference: DrawImage 我尝试在
我目前正在尝试将图像打印到屏幕上,以便准备创建游戏。我可以单独显示图像,但前提是该图像是在 paintComponents() 类中实例化的。当然,我不想每帧都重新实例化整个板,但似乎无法让它工作。我
我正在尝试使用drawImage()方法获取要在屏幕上绘制的.jpg图像,但它不会绘制。这是代码: public void paint(Graphics g) { Image imag
在我的程序中,我有以下代码: package io.github.AdmiralSbs.DiceWars; import javax.imageio.ImageIO; import javax.swi
这基本上就是我的代码的工作方式 class Main extends JFrame implements Runnable { public Main() { //init ever
几天来,我一直在努力弄清楚为什么我的九层代码不能按预期工作。据我所知,Graphics.DrawImage 方法似乎存在问题,它无法正确处理我的九个切片图像。所以我的问题是如何补偿在紧凑型框架上运行我
当您将名为 logo.png 的图片放在与此 html 文件相同的目录中并尝试在 Web 浏览器中运行它时,该图片在 IE 中仅出现 10 次刷新中的 1 次,而在Firefox,但在进一步刷新后会出
当我使用 Graphics.DrawImage 绘制图像并以比原始图像更大的尺寸绘制时,它最终变得有点太小了。您可以在下图中看到这一点: 绿线不应该是可见的,也不是图像的一部分。相反,它们被绘制在图像
import java.awt.*; import javax.swing.*; public class Main { JFrame jf; Main() {
我正在尝试使用 Java 面板显示图像,但行不通。该代码没有给出任何异常和/或错误,但图像没有加载。该图像确实存在,我也尝试过 .jpg,但效果不佳。 package feupcraftproject
我需要在内存中保存约 50 个图像(这是必须的,也是我无法改变的条件)。但是,有时我想在 JFrame 上绘制这些图像的缩略图。 使用 graphics.drawImage(picture, 100,
最近我一直在构建一个在JFrame上绘制图像的应用程序,一切都很棒,但是当窗口离开屏幕时,绘制的图像就消失了,我一直想知道是否有办法避免那?谢谢 import javax.swing.*; 导入 ja
我有一个扩展 jlabel 并使用 paintComponent 在其上绘制的类,如下所示这是 paintPhotos.java package myApp; import java.awt.*; i
我正在玩 JavaFX,在 start(Stage theStage) 类中我有以下代码: /*... Scene, stage, canvas ...*/ GraphicsContext gc =
我正在尝试编写一些简单的游戏,但我一直在 Canvas 上绘制资源。我创建了一个 AssetsLoader“类”来加载图像并将其保存为图像对象。一开始我只想绘制一些加载的资源。但是drawImage函
我使用drawImage来“调整”图像的大小; img.onload = function(){ var width = img.width * 0.16,
我正在使用drawImage()。这是我的代码。 imDiv 包含一个内联 svg。 var c =document.getElementById( 'cvs' ); var ctx =c.g
我是一名优秀的程序员,十分优秀!