首页 >> js开发 >> js代码JavaScript基于用户照片姓名生成海报
js代码JavaScript基于用户照片姓名生成海报
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
前言
前言
最近在为公司的一个比赛制作专题页，碰到一个使用参赛者上传的照片生成专属海报的需求，实现过程中用到了一些以前没用过的 api，也踩了一些坑，于是将其记录下来。需求描述
需求描述
用户点击按钮进行照片上传
照片上传完成后，将照片进行裁剪，并和海报背景、姓名等组合得到海报
将生成的海报上传
用户点击按钮进行照片上传照片上传完成后，将照片进行裁剪，并和海报背景、姓名等组合得到海报将生成的海报上传效果大概如下：海报背景：成品：实现过程
实现过程
1、初始化 canvas
1、初始化 canvas
canvas#poster-canvas(width='960' height='1280')
function initCanvas() {
canvasCtx = document.getElementById("poster-canvas").getContext('2d');
}
canvas#poster-canvas(width='960' height='1280')
function initCanvas() {
canvasCtx = document.getElementById("poster-canvas").getContext('2d');
}2、绘制海报背景
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();
});
$('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);
}
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、上传照片
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;
}
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) {
}
});
}
});
$('#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、绘制照片
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();
});
$('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);
canvasCtx.drawImage(backgroundImg, 0, 0, 960, 1280);canvasCtx.drawImage(avatarImg, cutStartX, cutStartY, newWidth, newWidth, 0, 0, 960, 960);
5、上传海报
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 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) {
}
});
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) {
}
});至此，整个流程完结。以上就是本文的全部内容，希望对大家的学习有所帮助。
前言
最近在为公司的一个比赛制作专题页，碰到一个使用参赛者上传的照片生成专属海报的需求，实现过程中用到了一些以前没用过的 api，也踩了一些坑，于是将其记录下来。需求描述
需求描述
用户点击按钮进行照片上传
照片上传完成后，将照片进行裁剪，并和海报背景、姓名等组合得到海报
将生成的海报上传
用户点击按钮进行照片上传照片上传完成后，将照片进行裁剪，并和海报背景、姓名等组合得到海报将生成的海报上传效果大概如下：海报背景：成品：实现过程
实现过程
1、初始化 canvas
1、初始化 canvas
canvas#poster-canvas(width='960' height='1280')
function initCanvas() {
canvasCtx = document.getElementById("poster-canvas").getContext('2d');
}
canvas#poster-canvas(width='960' height='1280')
function initCanvas() {
canvasCtx = document.getElementById("poster-canvas").getContext('2d');
}2、绘制海报背景
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();
});
$('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);
}
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、上传照片
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;
}
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) {
}
});
}
});
$('#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、绘制照片
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();
});
$('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);
canvasCtx.drawImage(backgroundImg, 0, 0, 960, 1280);canvasCtx.drawImage(avatarImg, cutStartX, cutStartY, newWidth, newWidth, 0, 0, 960, 960);
5、上传海报
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 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) {
}
});
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) {
}
});至此，整个流程完结。以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章:
- js使用React-Router实现前端路由鉴权的示例代码js大全
- js解决vue页面渲染但dom没渲染的操作js大全
- js谈一谈vue请求数据放在created好还是mounted里好js大全
- js解决vue的router组件component在import时不能使用变量问题js大全
- js在vue中使用防抖函数组件操作js大全
- jsVue中的this.$options.data()和this.$data用法说明js大全
- jsElement Breadcrumb 面包屑的使用方法js大全
- js解决vue动态路由异步加载import组件,加载不到module的问题js大全
- jsAngular利用HTTP POST下载流文件的步骤记录js大全
- js解决vuex数据页面刷新后初始化操作js大全
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
