Canvas的drawImage方法类型错误：传入值不符合要求，如何解决？

错误原因 #

你直接把文件选择器DOM元素（$("#file-picker")[0]是HTMLInputElement类型）传给了drawImage，但这个方法只接受图片/画布/视频类的元素，所以触发类型错误。

修复方案 #

要通过FileReader读取选中的图片文件，转成可被Image对象识别的DataURL，再绘制到Canvas上。修改后的代码如下：

$("#file-picker")[0].onchange = function() {
    $("#EnterWrapper").hide();
    $("#ContainerWrapper").show(); // 原代码缺少选择器前缀#，已补全
    var c = document.getElementsByClassName('demo-canvas');
    var ctx = c[0].getContext("2d");
    
    // 获取选中的文件
    const file = this.files[0];
    if (!file || !file.type.startsWith('image/')) {
        alert('请选择图片文件');
        return;
    }
    
    // 创建FileReader读取文件内容
    const reader = new FileReader();
    reader.onload = function(e) {
        // 创建Image对象加载图片
        const img = new Image();
        img.onload = function() {
            // 图片加载完成后再执行绘制
            ctx.drawImage(img, 10, 10, 150, 180);
        };
        img.src = e.target.result; // 将读取到的DataURL设为图片源
    };
    reader.readAsDataURL(file);
};

关键修正点 #

• 补全了ContainerWrapper选择器的#前缀，否则无法定位到目标元素
• 不再直接传递文件选择器元素给drawImage，而是读取选中的File对象并转成图片可识别的格式
• 新增图片加载完成的回调，确保图片资源就绪后再执行绘制操作
• 增加图片类型校验，避免非图片文件导致的异常

内容的提问来源于stack exchange，提问作者pratik shourabh