从本地路径加载图像并将其绘制在画布上

我想在画布上绘制图像，其中图像源将由用户动态设置。在尝试设置图像的 src 时出现以下错误：

不允许加载本地资源：file:///D:/My%20Picsb.jpg'

有没有办法从本地驱动器加载文件以将它们绘制在画布上？

var img = new Image();
img.onload = function () {  
    context.drawImage(img, 20, 20, 50, 50);
};

img.src = "D:\My Pics\tb.jpg";

由于安全原因，你想要的东西不会起作用。你什么could然而，要做的是添加一个文件输入字段并且upload它到画布上，如下所示：

HTML

<input type="file" id="file_input">

JS

$("#file_input").change(function(e){


    var URL = window.webkitURL || window.URL;
    var url = URL.createObjectURL(e.target.files[0]);
    var img = new Image();
    img.src = url;


    img.onload = function() {

            img_width = img.width;
            img_height = img.height;

            context.drawImage(img, 0, 0, img_width, img_height);

    }


});

不久前我遇到了和你一样的问题，这段代码在将本地图像加载到画布上时完成了工作。不过，我还建议最终调整图像大小，使其适合画布。我使用了以下代码（替换460与画布的大小）。

var new_x = 0;
var new_y = 0;

if (img_width > img_height) {
    new_x = 460;
    new_y = (460*img_height)/img_width;
} 

else if (img_height > img_width) {
    new_x = (460*img_width)/img_height;
    new_y = 460;
}

else {
    new_x = 460;
    new_y = 460;
}

context.drawImage(img, 0, 0, new_x, new_y);