如何在框架内获取元素? (画画布)

时间:2017-02-07 12:35:18

标签: javascript canvas

页面示例: http://google.com/recaptcha/api2/demo

如果我打开图像'myid',框架将是 - 示例:frame2

现在我想做的是在'frame2'中绘制'myid'的画布。

这是我拥有的代码:(按元素ID绘制)

var canvas = window.document.createElementNS('http://www.w3.org/1999/xhtml',   'html:canvas');
var selection_element = window.document.getElementById("myid");
var selection;
var de = window.document.documentElement;
var box = selection_element.getBoundingClientRect();
var new_top = box.top + window.pageYOffset - de.clientTop;
var new_left = box.left + window.pageXOffset - de.clientLeft;
var new_height = selection_element.offsetHeight;
var new_width = selection_element.offsetWidth;
selection={
top:new_top,
left:new_left,
width:new_width,
height:new_height,
};
canvas.height = selection.height;
canvas.width = selection.width;
var context = canvas.getContext('2d');
context.drawWindow(
window,
selection.left,
selection.top,
selection.width,
selection.height,
'rgba(255, 255, 255, 0)'
);
var canvasdata = canvas.toDataURL('','').split(',')[1];

1 个答案:

答案 0 :(得分:1)

要将项目追加到框架,您需要通过ID调用该项目。在这个HTML中:

class ViewController: UIViewController {

    var label = UILabel()
    var button = UIButton()
    var stackView = UIStackView()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.cyan
        navigationItem.title = "VCTitle"
        setupUI()
    }

    private func setupUI(){

        label.backgroundColor = UIColor.blue
        label.heightAnchor.constraint(equalToConstant: 50).isActive = true
        label.widthAnchor.constraint(equalToConstant: 80).isActive = true

        button.backgroundColor = UIColor.purple
        button.heightAnchor.constraint(equalToConstant: 30).isActive = true
        button.widthAnchor.constraint(equalToConstant: 10).isActive = true

        setupStackView()

        stackView.addArrangedSubview(label)
        stackView.addArrangedSubview(button)
        stackView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(stackView) //AA

        // The 2 lines below are now in the right place.
        stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true // B1
        stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true // B2


    }

    private func setupStackView(){

        stackView.axis = UILayoutConstraintAxis.vertical
        stackView.distribution = UIStackViewDistribution.equalSpacing
        stackView.alignment = UIStackViewAlignment.center
        stackView.spacing = 15

    }
}

如果您使用此代码:

<iframe id="frm1"></iframe>
<iframe id="frm2"></iframe>

不起作用,但这个有效:

$(document).ready(function ()
    {
        var frames = window.frames;
        for (var i = 0; i < frames.length; i++)
        {
            var fi = frames[i]

            $(fi).load(function ()
            {
                $(this).contents().find('body').append("<span>Hello World!</span>");
            });
        }
    });

我尝试创建代码段,但似乎它有框架问题。

您可以复制确切的HTML并对其进行测试。