CORB警告导致canvas绘制图片失败，外链图片无法加载如何解决？

你遇到的问题是多个错误共同导致的，具体原因和修复方法如下：

1. HTML结构与配置错误 #

• img标签不允许放在<head>标签内，所有可视元素都必须写在<body>标签中
• <meta>的Content-Type配置错误：HTML页面的Content-Type应为text/html，你错误写成了image/png，同时语法错误，分号错误放在了属性引号外侧

2. 图片链接错误 #

你当前使用的是谷歌图片搜索的跳转链接，不是图片的直接资源链接，该链接返回的是HTML跳转页面而非图片资源，浏览器识别到资源类型不匹配就会触发CORB拦截，导致图片加载失败。你应该直接使用链接中指向的实际图片直链。

3. 图片加载时机不可靠 #

使用setTimeout固定延迟300ms执行绘制逻辑完全不可靠，如果网络波动导致图片加载耗时超过300ms，图片还没加载完成就执行drawImage就会绘制失败。正确做法是监听图片的load事件，等图片加载完成后再执行绘制操作。

4. 可选：跨域配置 #

如果你后续需要读取canvas的内容（比如导出为图片、获取像素数据等），需要给img标签添加crossorigin="anonymous"属性，同时需要图片服务器支持跨域访问。

修复后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
</head>
<body>
    <img class="single-image" src="http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/neutral-face.png" crossorigin="anonymous" />
    <canvas width="320" height="320"></canvas>
    <script>
        function copyImageToCanvas() {
            var image = document.querySelector("img");
            var canvas = document.querySelector("canvas");
            var ctx = canvas.getContext("2d");
            ctx.drawImage(image, 0, 0)
        }
        // 等待图片加载完成后再绘制
        const img = document.querySelector('.single-image')
        img.addEventListener('load', copyImageToCanvas)
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Νικόλαος Καλαμπόκας