JavaScript基于用户照片姓名生成海报


Posted in Javascript onMay 29, 2020

前言

最近在为公司的一个比赛制作专题页,碰到一个使用参赛者上传的照片生成专属海报的需求,实现过程中用到了一些以前没用过的 api,也踩了一些坑,于是将其记录下来。

需求描述

  • 用户点击按钮进行照片上传
  • 照片上传完成后,将照片进行裁剪,并和海报背景、姓名等组合得到海报
  • 将生成的海报上传

效果大概如下:

海报背景:

JavaScript基于用户照片姓名生成海报

成品:

JavaScript基于用户照片姓名生成海报

实现过程

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 void(0)的妙用
Oct 21 Javascript
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
element-ui多文件上传的实现示例
Apr 10 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
JS数组的常用方法整理
Mar 31 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 #Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 #Javascript
JavaScript隐式类型转换代码实例
May 29 #Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 #Javascript
node+vue实现文件上传功能
May 28 #Javascript
vue中实现图片压缩 file文件的方法
May 28 #Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 #Javascript
You might like
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
php语法检查的方法总结
2019/01/21 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python运用于数据分析的简单教程
2015/03/27 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
python如何删除文件中重复的字段
2019/07/16 Python
Numpy的简单用法小结
2019/08/28 Python
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
中式婚礼主持词
2014/03/13 职场文书
文明寝室标语
2014/06/13 职场文书
三峡人家导游词
2015/01/31 职场文书
团委工作总结2015
2015/04/02 职场文书
2015年双拥工作总结
2015/04/08 职场文书
停电调休通知
2015/04/16 职场文书
英雄儿女观后感
2015/06/09 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js