Append content to new browser window from the parent page

问题

I am trying to integrate a cropping tool to my website (js plugging resizing cropping images canvas). This tool will let the user crop an image, open it in a new browser page, and give him the capacity to save the new image into the disk.

The cropping code is as following:

crop = function(){
    //Find the part of the image that is inside the crop box
    var crop_canvas,
    left = $('.overlay').offset().left - $container.offset().left,
    top =  $('.overlay').offset().top - $container.offset().top,
    width = $('.overlay').width(),
    height = $('.overlay').height();

    crop_canvas = document.createElement('canvas');
    crop_canvas.width = width;
    crop_canvas.height = height;

    crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);
    var newWindow = window.open(crop_canvas.toDataURL("image/png"));
}

Now i want to append some HTML content to newWindow body, but it does not work. I tried to add the following after window.open command:

var text = document.createTextNode('Hello World !');
newWindow.document.body.appendChild(text);

But nothing is added to the new page ?

How can add stuff to the body of the new page using the script from the parent page ? (Html content and even some javascript code)

Thanks!

回答1:

var dataUri = crop_canvas.toDataURL("image/png"),
    newWindow = window.open("about:blank");

newWindow.document.write("<!DOCTYPE html>\n<body><img src='" + dataUri + "' /></body>");

var text = document.createTextNode('Hello World !');
newWindow.document.body.appendChild(text);

来源：https://stackoverflow.com/questions/34862451/append-content-to-new-browser-window-from-the-parent-page

标签

javascript

jquery

html

image

html5-canvas