在 chrome 中将图像从 localhost 绘制到画布上答案

【问题标题】：drawing image from localhost onto canvas in chrome在 chrome 中将图像从 localhost 绘制到画布上
【发布时间】：2012-08-17 03:23:18
【问题描述】：

我正在从 localhost 中的文件夹访问图像。

图像在 img 标签中正确加载。但是，当我尝试将该图像绘制到画布上时，它并没有出现！

我已经实现了它，当图像被放到画布上时，它被绘制到它上面，我通过从原始源获取图像来绘制它。当我一次又一次地拖动时，经过一些尝试，它就会出现。

该功能在 Firefox 和 I.E. 中完美运行

这是我在 localhost 上的图片来源：

b.src = "http://localhost/casema...E/2780Chrysanthemum.jpg"

ctx1.drawImage(b, x2-15*z, y2-15*z, w1, h1 );

【问题讨论】：

如果您将链接发布到您的本地主机，这将无济于事！我们看不到！
我猜你写了一些代码。我们能看到吗？
当我从互联网上提供一些图片的链接时也会发生同样的情况！
从您的代码中不清楚 - 变量中包含哪些值 - b、x2、z、y2、w1、h1，请添加更多代码 =)
你有什么错误吗？您是否正在等待图像加载后再尝试将其绘制到画布上？

标签： javascript image html canvas html5-canvas

【解决方案1】：

在 HTML5 中，不能确定图像总是会立即加载，所以你需要确保图像在您绘制之前已完全加载。这段代码可以帮助你：

var myImage = new Image();
myImage.src = "path/to/your/image";
myImage.onload = function(){
      //context is the canvas context 
      context.drawImage(myImage,x,y,weight,height);
}

【讨论】：

【解决方案2】：

您是否在计算机上使用本地 HTML 文件？如果是则需要添加参数

--allow-file-access-from-files

调用 Chrome 时。

【讨论】：

我应该在哪里使用这个参数？我的意思是在我的代码中的哪个位置？
但我将文件上传到服务器（本地主机），然后从那里访问它！并且有时会出现多次尝试！
当您从 localhost 运行 HTML 文件时，我不知道为什么它是间歇性的。不是从服务器运行它，而是作为您计算机上的 HTML 文件运行它，您需要为 Chrome 创建一个快捷方式，右键单击快捷方式，选择属性找到快捷方式的应用程序目标并在 chrome.exe 后添加参数，留出空格.有关更多详细信息，请在 google 上搜索短语和 chrome