Question

我正在尝试将裁剪工具集成到我的网站（js plugging resizing cropping images canvas）。该工具将允许用户裁剪图像，在新的浏览器页面中打开它，并让他有能力将新图像保存到磁盘中。

裁剪代码如下：

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"));
}

现在我想将一些HTML内容附加到newWindow主体，但它不起作用。我尝试在window.open命令之后添加以下内容：

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

但新页面没有添加任何内容？

如何使用父页面中的脚本将内容添加到新页面的主体中？（Html内容甚至一些javascript代码）

谢谢！

Answer 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);

从父页面

1 个答案: