支付宝新年六福图片

默认图片背景：

 

Html:

<img id="alipayBG" src="上述图片路径">

 

Javascript:

var ratio = window.devicePixelRatio || 1;
//输入金额数字，生成图片
document.getElementById('generate').addEventListener('click', function() {
     var canvas = document.createElement('canvas');
     canvas.width = 749 * ratio;
     canvas.height = 1281 * ratio;
     canvas.style.width = 749 + 'px';
     canvas.style.height = 1281 + 'px';
     var ctx = canvas.getContext('2d');
     ctx.drawImage(document.getElementById('alipayBG'), 0, 0, canvas.width, canvas.height);
     ctx.fillStyle = '#c93737';
     ctx.font = '700 ' + (65 * ratio) + 'px 微软雅黑, 苹方, 汉黑, 黑体, sans-serif';
     ctx.textAlign = 'center';
     ctx.fillText(document.getElementById('number').value, canvas.width / 2 - 30 * ratio, 780 * ratio);
     ctx.font = '400 ' + (30 * ratio) + 'px 微软雅黑, 苹方, 汉黑, 黑体, sans-serif';
     ctx.textAlign = 'left';
     ctx.fillText('元', (canvas.width + document.getElementById('number').value.length * 30 * ratio) / 2, 780 * ratio);
     var B64 = canvas.toDataURL();
     var Img = document.createElement('img');
     Img.src = B64;
     Img.id = 'alipayOut';
     document.getElementById('alipayOut') && document.getElementsByClassName('info')[0].removeChild(document.getElementById('alipayOut'));
     document.getElementsByClassName('info')[0].appendChild(Img);
});