使用canvas在一张图片上动态显示文字信息，并支持图片下载。

前端jsp页面：

<!--需要合成图片，因为没法直接读取本地图片，所以将图片放在这里并隐藏-->
<div style="display:none">
<img id="starImg" style="height:100%; width:100%;" src="图片地址" />
  </div>

<!--画布-->
<canvas id="main" height="330" width="700" style="border:0px solid #d3d3d3;margin-left:50px;">
<input type="text" name="username" id="desc" onload="hecheng()" value="志愿者：${VDonate.name}" />
 </canvas>

<button id="button" onclick="saveAsLocalImage()">下载</button>

js方法：

<script>
    //预加载将图片绘制到画布
    $(function(){
        hecheng();
    });

    function hecheng(){
        
        //获取画布对象
        var mainCtx = getCanvasContext('main');
        var maxWidth = mainCtx.width;
        var maxHeight = mainCtx.height;
        mainCtx.clearRect(0,0,600,400);
        //获取图片的实际路径
        var starImg = new Image();
        starImg.src=$('#starImg').attr('src');
        //合成
        starImg.onload=function(){
            //先把图片绘制在这里
            mainCtx.drawImage(starImg,-152,-86,1000,500);
            //读取用户的文本
            if($('#desc').val()){
                //设置用户文本的大小字体等属性
                mainCtx.font = "small-caps  18px STXinwei ";
                //设置用户文本填充颜色
                mainCtx.fillStyle = "black";
                //绘制文字
                mainCtx.fillText($('#desc').val(),320,170);
            }
     };
  }
    //通过id获取canvas对象
    function getCanvasContext(id){
        return document.getElementById(id).getContext("2d");
    }
   
    //下载图片
    function saveAsLocalImage(){
        // 图片导出为 png 格式
var type = 'png';
var myCanvas = document.getElementById("main");
// 返回一个包含JPG图片的<img>元素
var img_png_src = myCanvas.toDataURL("image/jpg");  //将画板保存为图片格式的函数
// 加工image data，替换mime type  image/octet-stream浏览器自带下载
imgData = img_png_src.replace(_fixType(type),'image/octet-stream');
// 下载后的文件名
var filename = '登记卡-' +'${VDonate.name}'+ '.' + type;
// download
saveFile(imgData,filename);
}

/**
* 在本地进行文件保存
* @param  {String} data     要保存到本地的图片数据
* @param  {String} filename 文件名
*/
var saveFile = function(data, filename){
   var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
   save_link.href = data;
   save_link.download = filename;
  
   var event = document.createEvent('MouseEvents');
   event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
   save_link.dispatchEvent(event);
};

/**
* 获取mimeType
* @param  {String} type the old mime-type
* @return the new mime-type
*/
var _fixType = function(type) {
   type = type.toLowerCase().replace(/jpg/i, 'jpeg');
   var r = type.match(/png|jpeg|bmp|gif/)[0];
   return 'image/' + r;
    }

</script>