相关疑难解决方法(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 …

我正在加载来自第三方网站的动作jpeg,我可以信任.我正在尝试,getImageData()但浏览器(Chrome 23.0)抱怨说:

Unable to get image data from canvas because the canvas has been tainted by
cross-origin data.

SO上有一些类似的问题,但他们使用的是本地文件,而我正在使用第三方媒体.我的脚本在共享服务器上运行,我没有远程服务器.

我试过img.crossOrigin = 'Anonymous'或img.crossOrigin = ''(参见关于CORS的Chromium博客上的这篇文章),但它没有帮助.关于我如何getImageData在具有跨源数据的画布上的任何想法？谢谢!

/**
 * Converts data URI in 'image/png' format to an image data object
 * @param dataURL Base64 encoded string
 * @returns {ImageData/undefined}
 */
convertDataURLToImageData: function (dataURL) {
    if (dataURL !== undefined && dataURL !== null) {
        var canvas, context, image, imageData;
        canvas = document.createElement('canvas');
        canvas.width = 470;
        canvas.height = 470;
        context = canvas.getContext('2d');
        image = new Image();

        image.addEventListener('load', function(){
            context.drawImage(image, 0, 0, canvas.width, canvas.height);
            imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            //how do i return this?
        }, false);
        image.src = dataURL; …

您好,
我想canvas.toDataURL()在将其发送到服务器之前裁剪我,但我没有找到如何:(
这是我的代码:

TakePhoto: function() {
        var myCanvas = document.getElementById('game');
        var dataURL = myCanvas.toDataURL();
        // crop the dataURL
    }

那么,如何裁剪dataURL？
谁能帮我 ？
提前致谢

我有一个CSS样式,在它的背景中它有一个图像,例如它就像这个代码

.test {
    background-image: url("paper.gif");
    background-color: #cccccc;
}

我也有一个javascript代码,用于获取图像的平均颜色,

function getAverageRGB(imgEl) {

    var blockSize = 5, // only visit every 5 pixels
        defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs
        canvas = document.createElement('canvas'),
        context = canvas.getContext && canvas.getContext('2d'),
        data, width, height,
        i = -4,
        length,
        rgb = {r:0,g:0,b:0},
        count = 0;

    if (!context) {
        return defaultRGB;
    }

    height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
    width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;

    context.drawImage(imgEl, 0, 0);

    try {
        data …