如何应用数据:iframe中的javascript中的图像到画布?

时间:2018-01-11 13:32:12

标签: javascript html canvas iframe

我创造了以下小提琴。 https://jsfiddle.net/ub1Lj4j8/1/

var t1 = document.getElementById('myCanvas');
var data = 'data:image/png;base64,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';

var img = new Image();
img.src = data;
t1.getContext('2d').drawImage(img, 0, 0);

问题是,当画布位于iframe中时,我似乎无法将数据应用于画布:

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

试试这个,

    //Find the iframe in the current document
    var doc = $('#myIframe').contents()[0];

     //Get the iframe's window context
   var iFrameWindow = 'defaultView' in doc? doc.defaultView : doc.parentWindow;

  //Now we can get jQuery by doing iFrameWindow.$ or iFrameWindow.jQuery
  iFrameWindow.$('canvas')