相关疑难解决方法(0)

考虑以下(脆弱的)JavaScript代码:

var img = new Image;
img.src = "data:image/png;base64,..."; // Assume valid data

// Danger(?) Attempting to use image immediately after setting src
console.log( img.width, img.height );
someCanvasContext.drawImage( img, 0, 0 );

// Danger(?) Setting onload after setting src
img.onload = function(){ console.log('I ran!'); };

问题

• 图像宽度和高度应该立即正确吗？
• 画布应该立即开始工作吗？
• 是否应该onload调用回调(在src更改后设置)？

实验测试
我创建了一个具有类似代码的简单测试页面.在Safari我的第一次测试,都是由本地打开HTML网页(file:///URL),并从我的服务器加载它,结果显示一切工作:高度和宽度是正确的,在画布上绘制的作品,并且在onload还火.

在Firefox v3.6(OS X)中,启动浏览器后加载页面显示设置后高度/宽度不正确,drawImage()失败.(然而,onload处理程序会触发.)然而,再次加载页面会在设置和drawImage()工作后立即显示宽度/高度.Firefox似乎将数据URL的内容缓存为图像,并在同一会话中使用时立即可用.

在Chrome v8(OS X)中,我看到与Firefox相同的结果:图像不能立即使用,但需要一些时间从数据URL异步"加载".

除了实验证明上述哪些浏览器有效或无效之外,我真的很喜欢这些应该如何表现的规范的链接.到目前为止,我的Google-fu还没有完成任务.

安全玩耍
对于那些不明白为什么上面可能有危险的人,要知道你应该使用这样的图像是安全的:

// First create/find the …

我试图操纵imageData但我的imageData数组在加载图像并获取其像素数据后返回全0.

有一些html元素,如滑块和文本框.请忽略这些.

有一个ImageObject数据结构,我存储所有图像属性,如image,pixelData等.

我首先加载图像,获取其像素数据,然后返回一个回调来存储ImageObject.imageData.但是在日志ImageObject.data中返回全0.

ImageObject = {};
var MainCtx;
var MainCanvas;
//get the image pixel properties

function start()
{
    //load up the main canvas and ctx 
    MainCanvas = document.getElementById("canvas");
    MainCtx = MainCanvas.getContext('2d');

    //first load up the image and then get its pixel data
    ImageObject.loadImage(function(imageData){
        ImageObject.imageData = imageData;
        ImageObject.data = ImageObject.imageData.data;

        console.log(ImageObject.data); // -> data return all 0's in the array

        for(var i = 0; i < ImageObject.data.length; i += 4) {
            var brightness = 0.34 * ImageObject.data[i] + 0.5 * …

我正在尝试从图像输出像素值.图像正确加载; 这里的另一个答案表明,浏览器试图在图像加载完成之前读取像素,但我可以看到它在alert()触发时加载.

function initContext(canvasID, contextType)
{
   var canvas = document.getElementById(canvasID);
   var context = canvas.getContext(contextType);
   return context;
}

function loadImage(imageSource, context)
{
    var imageObj = new Image();
    imageObj.onload = function()
    {
        context.drawImage(imageObj, 0, 0);
    };
    imageObj.src = imageSource;
    return imageObj;
}

function readImage(imageData)
{
    console.log();
    console.log(imageData.data[0]);
}

var context = initContext('canvas','2d');
var imageObj = loadImage('images/color-test.png',context);
var imageData = context.getImageData(0,0,10,10);
alert();
readImage(imageData);