如果让 用户通过form上传文字图片，然后把整个form生成可下载的图片？

Question

菜鸟求助，如果让 用户通过form上传文字图片，然后把整个form生成可下载的图片？
我表述不太清楚，画个简单的图如下，例如左侧是个表单，用户可以输入文字，上传1张图片。
然后这一整个表单就可以成为一张图片，可以下载。

请问这是什么原理？ 一般通过什么实现？

Answer 1

用canvas文字转图片
连接 http://www.sucaihuo.com/js/19...

Answer 2

1.上传完图片调回到页面上，或者用FileReader()把本地要上传的图像文件变成DataUrl直接在页面上展现

var input = document.getElementById("inputArea")
var imgData = input.files[0];
var reader = new FileReader(); //调用FileReader对象
reader.readAsDataURL(imgData); //通过DataURL的方式返回图像
reader.onload = function(e) {
    var result = document.getElementById("result");
    result.innerHTML = '<img src="' + e.target.result + '" alt="" />';
}

2.将图片和你要渲染出的文字用html排版成你想要的样子
3.用html2canvas库将你的页面渲染成图片就OK了

html2canvas(document.getElementById('image'), {
    onrendered: function(canvas) {
        var image = canvas.toDataURL("image/png");  
        $("#pic").html("<img src='"+image+"' alt='from canvas'/>")
    },
});

Answer 3

噫 这问题有意思，等待大牛的想法。