详解JavaScript如何基于用户照片姓名生成海报
这篇文章主要详解JavaScript如何基于用户照片姓名生成海报,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
10多年的陆丰网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整陆丰建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联公司从事“陆丰网站设计”,“陆丰网站推广”以来,每个客户项目都认真落实执行。
前言
最近在为公司的一个比赛制作专题页,碰到一个使用参赛者上传的照片生成专属海报的需求,实现过程中用到了一些以前没用过的 api,也踩了一些坑,于是将其记录下来。
需求描述
- 用户点击按钮进行照片上传
- 照片上传完成后,将照片进行裁剪,并和海报背景、姓名等组合得到海报
- 将生成的海报上传
效果大概如下:
海报背景:
成品:
实现过程
1、初始化 canvas
canvas#poster-canvas(width='960' height='1280') function initCanvas() { canvasCtx = document.getElementById("poster-canvas").getContext('2d'); }
2、绘制海报背景
海报背景为预先提供的一张照片,将其设置到一个隐藏的 img 标签里面,并且预留一个 canvas 元素用于绘制海报:
img.poster-background(src='/assets/xxx/poster-background.jpeg')
页面加载完成后,将海报背景绘制到 canvas 内:
$('img.poster-background').on('load', function () { var backgroundImg = $('img.poster-background')[0]; canvasCtx.drawImage(backgroundImg, 0, 0, 960, 1280); renderName(); });
海报背景绘制完成之后,需要将用户姓名绘制到特定位置。由于用户姓名长度不一,因此需要进行计算确定字体大小:
function renderName() { var name = $('input[name="chName"]').val(); var fontSize; if (name.length < 3) { fontSize = 100; } else { fontSize = parseInt(320 / name.length); } canvasCtx.font = "bold " + fontSize + "px Courier New"; canvasCtx.fillStyle = "#de071b"; canvasCtx.fillText(name, 20, 1066); }
3、上传照片
使用 file 类型的 input 元素,因为页面上表现为点击按钮,因此使用经典的将 input 元素透明化并覆盖按钮的方法:
a.upload-btn input#photo(type='file' name='photo' accept='image/jpeg, image/png') | 上传自己的照片生成专属海报 .upload-btn input { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 68px; cursor: pointer; }
然后监听 input 元素的 change 事件,然后使用 FormData API 构造表单数据,使用 ajax 进行异步上传,照片上传完成之后。得到一个地址,将这个地址设置到页面上预留的一个 img 标签里面:
$('#photo').on('change', function (e) { var file = e.target.files[0]; var type = file.type; if (type !== 'image/jpeg' && type !== 'image/png') { window.toastr.error('请上传 jpg 或 png 格式的图片'); } else { var formData = new FormData(); formData.append('avatar', file); $.ajax({ type: 'POST', url: '/upload_url', data: formData, contentType: false, processData: false, success: function(result) { var avatarUrl = result.data.url; $('img.avatar').attr('src', avatarUrl); }, error: function(err) { } }); } });
4、绘制照片
海报中放置照片的区域为正方形,但是用户上传的照片却不一定,因此需要对照片进行裁剪,裁剪的原则为取照片中间部分。然后将裁剪参数传进 canvas 的 drawImage 方法,进行绘制:
$('img.avatar').on('load', function () { var avatarImg = $('img.avatar')[0]; var originWidth = avatarImg.width; var originHeight = avatarImg.height; var newWidth, cutStartX, cutStartY; if (originWidth < originHeight) { newWidth = originWidth; cutStartX = 0; cutStartY = (originHeight - originWidth) / 2; } else if (originWidth > originHeight) { newWidth = originHeight; cutStartX = (originWidth - originHeight) / 2; cutStartY = 0; } else { newWidth = originWidth; cutStartX = 0; cutStartY = 0; } canvasCtx.drawImage(avatarImg, cutStartX, cutStartY, newWidth, newWidth, 0, 0, 960, 960); uploadPoster(); });
前面绘制海报背景和这里绘制照片,调用的是同一个方法,只不过后者多传进去了裁剪参数。但是需要注意的是,裁剪参数是在绘制位置之前传进去的,而不是简单的补在后面:
canvasCtx.drawImage(backgroundImg, 0, 0, 960, 1280);
canvasCtx.drawImage(avatarImg, cutStartX, cutStartY, newWidth, newWidth, 0, 0, 960, 960);
5、上传海报
依然使用 FormData API,因此需要先用 canvas 构造一个 Blob 对象。新版本的 Chrome 和 Firefox 支持 canvas 的 toBlob 方法,可以直接使用:
document.getElementById("poster-canvas").toBlob(function (blob) {});
其它浏览器里,可以先用 toDataURL方法得到 base64 格式的图片数据,再转为 Blob:
var blob = dataURLtoBlob(document.getElementById("poster-canvas").toDataURL()); function dataURLtoBlob(dataurl) { if (dataurl.indexOf('base64') < 0) { dataurl = 'data:image/jpeg;base64,' + dataurl; } var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n); while (n --) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type: mime}); }
然后进行上传,步骤和前面上传照片一致:
var formData = new FormData(); formData.append('poster', blob); $.ajax({ type: 'POST', url: '/upload_poster_url', data: formdata, contentType: false, processData: false, success: function(result) { }, error: function(err) { } });
至此,整个流程完结。
以上就是关于详解JavaScript如何基于用户照片姓名生成海报的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。
网站题目:详解JavaScript如何基于用户照片姓名生成海报
当前地址:http://pwwzsj.com/article/pigepd.html