canvas生成图片并下载图片或者pdf

canvas生成图片并下载图片或者pdf

如题 , 用的是html2canvas和jspdf来实现的
html2canvas截图是截取可视区域之内的

代码需要放到服务器上运行, 不然toDataURL()会显示跨域错误

<script type="text/javascript" src="js/jquery1.9.1.min.js"></script>
<script src="js/html2canvas.min.js" type="text/javascript"></script>
<script src="js/jspdf.min.js" type="text/javascript"></script>
    
$('#renderPdf').on('click', function (e) {
	var w = $('#zhengshu').width()
	var h = $('#zhengshu').height()
	var canvas = document.createElement("canvas")
	canvas.width = w * 2;
	canvas.height = h * 2;
	canvas.style.width = w + "px"
	canvas.style.height = h + "px"
	var context = canvas.getContext("2d"); //然后将画布缩放，将图像放大两倍画到画布上
	context.scale(2, 2)
	html2canvas($('#zhengshu'), {
		canvas: canvas,
		useCORS: true, //使用跨域
		onrendered: function (canvas) {
			var url = canvas.toDataURL('image/png', 1.0);
			//之前本地用Base64下载会显示网络错误, 然后用Blob进行转换
   			canvas.toBlob(function (blob) {
				href = URL.createObjectURL(blob)
				//html5 download属性,只有chrome, firefox可以使用
				var $a = $('<a></a>').attr('href', href).attr('download', 'download.png').appendTo('body')
				$a[0].click()
				$a.remove()
				})
			//下载为pdf格式	但是下载为pdf会模糊，还没有解决
			//方向默认竖直 'l'代表横板，尺寸ponits，格式 b5[498.90, 708.66] 
			//var pdf = new jsPDF('l') 
			//addImage后两个参数控制添加图片的尺寸
			//pdf.addImage(url, 'png', 0, 0, 298, 210) 
			//pdf.save('证书.pdf')
			}
		})
	 e.preventDefault()
})