Html 使用dataurl将图像传递到画布

我试图使图像从weburl传递到画布。 代码取自此[问题][1]，已被接受，但由于某些原因，它在firefox或chrome上对我不起作用

有什么想法吗

编辑： 给你：

var myCanvas = document.getElementById('my_canvas_id');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
  ctx.drawImage(img,0,0); // Or at whatever offset you like
};

  img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII=';

---

没有显示的原因是提供的数据URI不包含任何数据，即它是300x150完全透明的：

数据：图像/png；base64，IVBORW0KGGOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=

我的猜测是，您使用

toDataURL（）

将一个空画布保存为数据URI，现在正在使用它加载图像

尝试此URL，您将看到它可以正常工作（红色图像300x150）：

数据：图像/png；base64，IVBORW0KGGG0GAGAWACWCAYAAABKW7XSAACCBULEQVR4NO3UOQ0AIDEWN9/aVgBR5qcOF/VNE0AFOX3 AMARWWIYDAVIMCWGW7CADMMGW7CADMMGW7CADMMGW7CADMMGW7CADMMGW7CADMMGW7CADMCGW7CADMCGW7CADMCGW7CADMGWIYDAVIMCW7CADMCGW7CADMCGW7CADMCGW7CADMCWW7CADMW7CADMCGW7CADMW7CADMGWIYDAVIMCW7GCW7CADMW7CADMCWW7CADMW7CADMW7CADMW7CADMW7CADMW7CADMW7MCW7CADMW7MCW7MCW7CADMW7CACDDSiamWWIYDAVIMCWGW7CadmmWWIYDAVIMCWGW7CadmmWWLYDAVIMCWGW7CadmmGWLYDAVIMCW7CadmmGWLYDASIMOWGW7CadmmGWLYDAVIMCW7CadmmGWLYDAVIMCWGW7CadmmGWLYDAVIMCW8GWLCDDSiamWWIYDAVIMCW7CadmmWWIYDAVIMCW7CadmmGWLYDAVIMCW7GW7CadmmWWLYDAVIMCW7GYDAVIMCW7GYDAVIMCW7GW7CadmmCMLYDAVIMCW7GW7GYDAVIMCW7GW7GW7GW7GYDAVIMCW7GW7GW7GW7GOWGAZDAJIMC8GWLCDDSIAMWWIYDAVIMCWG7CAJASWOUTZPRJAVAAAABJRU5ERKJGG==

var myCanvas=document.getElementById（'my_canvas_id'）；
var ctx=myCanvas.getContext（'2d'）；
var img=新图像；
img.onload=函数（）{
drawImage（img，0,0）；//或任意偏移量
};
img.src=“数据：图像/png；base64，IVBORW0KGGG0GAGAWACWCAYAAABKW7XSAACCBULEQVR4NO3UOQ0AIDEWN9/aVgBR5qcOF/VNE0AFOX3 AMARWWIYDAVIMCWGW7CADMMGW7CADMMGW7CADMMGW7CADMMGW7CADMMGW7CADMMGW7CADMCGW7CADMCGW7CADMCGW7CADMGWIYDAVIMCW7CADMCGW7CADMCGW7CADMCGW7CADMCWW7CADMW7CADMCGW7CADMW7CADMGWIYDAVIMCW7GCW7CADMW7CADMCWW7CADMW7CADMW7CADMW7CADMW7CADMW7CADMW7MCW7CADMW7MCW7MCW7CADMW7CACDDSiamWWIYDAVIMCWGW7CadmmWWIYDAVIMCWGW7CadmmWWLYDAVIMCWGW7CadmmGWLYDAVIMCW7CadmmGWLYDASIMOWGW7CadmmGWLYDAVIMCW7CadmmGWLYDAVIMCWGW7CadmmGWLYDAVIMCW8GWLCDDSiamWWIYDAVIMCW7CadmmWWIYDAVIMCW7CadmmGWLYDAVIMCW7GW7CadmmWWLYDAVIMCW7GYDAVIMCW7GYDAVIMCW7GW7CadmmCMLYDAVIMCW7GW7GYDAVIMCW7GW7GW7GW7GYDAVIMCW7GW7GW7GW7GOWGAZDAJIMC8GWLCDDSIAMWWIYDAVIMCWGW7CAJASWOUTZPRJAVAAABJRU5ERKJGG==”；

---

那里的代码很好。请分享您的代码版本，最好是使用实时代码（内联或fiddle）你能粘贴你使用过的代码吗？我知道你提到你已经使用了特定的代码，但是你可能复制了一些错误的东西，或者有一个错误，如果没有代码我们将无法看到。请查看上面的编辑。我没有放js小提琴，因为这一定是伴随着代码的事情让我有点困扰…您的问题现在与获得答案之前完全不同…您应该返回到原始编辑1，并发布一个新问题，其中包含与原始链接代码或第一次编辑无关的新代码。好的，非常感谢。您为什么删除您的答案？我已经准备好接受它了。@daad i在回答之前做了：）您可以运行代码并查看它现在是否工作（您文章中的数据uri仅包含透明图像）。