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

我想在画布上绘制一幅图像，其中用户将动态设置图像的源。在尝试设置图像的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";

---

因为安全原因，你想要的东西不起作用。但是，您可以添加一个文件输入字段并将其上载到画布，如下所示：

HTML

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

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

---

不可以。JavaScript有访问本地文件的安全块，无论是读还是写。将文件放在Web服务器上（由于跨域问题，最好放在同一个域上）

---

因为您的用户应该为文件提供代码，所以您必须编写文件上载解决方案。参考互联网了解如何做到这一点。

我需要类似的功能，并通过将图像临时上传到服务器并将目标img的src属性设置为该临时文件名，使用ajax解决了这一问题。您可以通过创建从服务器目录中删除这些临时映像的cron作业来完成此任务。

只是说……您正在引用跨源安全性（CORS），但如果用户启动提取，CORS不限制加载本地映像。用户可以通过（1）激活html输入类型文件元素或（2）将本地图像主动拖动到dropzone div中来启动提取，dropzone div使用FileReader获取图像的dataURL。顺便说一句，我没有用否决票来批评你。干杯@Daniellisk请问有没有用typescript编写的源代码？

$("#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);

    }


});

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);