项目总结——新闻编辑器

主要功能：在编辑页面输入文章标题、内容、头图、尾部图、二维码等信息，合成一张排版固定的图片，点击下载按钮可下载图片

实现方法：编辑页收集数据，本地存储，点击跳转文章图片下载页，绑定数据到页面上，点击下载图片按钮生成图片（利用html2canvas插件）并下载

技术点：
1.使用插件时遇到只能截图可视区域的问题
将需要生成图片的代码放在iframe中

html2canvas($Iframe.contents().find('.model_pic')[0], {
                onrendered: function(canvas) {
                    var url = canvas.toDataURL();
                    }
                    });

2.iframe高度自适应
js获取iframe内容的高度赋给iframe

function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.documentElement.scrollHeight || frameWin.document.body.scrollHeight;
        }
    }
};

3.下载图片方法
a.生成a标签，给href、download属性赋值，触发点击事件（只支持谷歌火狐等主流浏览器）

var dom = document.createElement("a");
    dom.href = canvas.toDataURL("image/png");
    dom.download = new Date().getTime() + ".png";
    dom.click();

b.生成iframe，将iframe的src指向图片地址，调用execCommand(),保存图片(Trident内核浏览器)

if ($('#imgIframe').src != "about:blank") {
            window.frames["imgIframe"].document.execCommand("SaveAs");
        }