脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript生成海报

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

 更新时间：2020年05月29日 09:40:28   作者：javascript痴痴  
这篇文章主要介绍了JavaScript基于用户照片姓名生成海报,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

前言

最近在为公司的一个比赛制作专题页，碰到一个使用参赛者上传的照片生成专属海报的需求，实现过程中用到了一些以前没用过的 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) {
  
 }
});

至此，整个流程完结。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • uni-app实现NFC读取功能

    uni-app实现NFC读取功能

    这篇文章主要为大家详细介绍了uni-app实现NFC读取功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • ie下$.getJSON出现问题的解决方法

    ie下$.getJSON出现问题的解决方法

    ie下$.getJSON出现问题是常有的事，下面为大家介绍下具体该如何解决,需要的朋友可以参考下
    2014-02-02
  • javascript模版引擎-tmpl的bug修复与性能优化分析

    javascript模版引擎-tmpl的bug修复与性能优化分析

    在平时编码中，经常要做拼接字符串的工作，如把json数据用HTML展示出来，以往字符串拼接与逻辑混在在一起会让代码晦涩不堪，加大了多人协作与维护的成本。而采用前端模板机制就能很好的解决这个问题
    2011-10-10
  • JavaScript enum枚举类型定义及使用方法

    JavaScript enum枚举类型定义及使用方法

    这篇文章主要介绍了JavaScript enum枚举类型定义及使用方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • JS自定义选项卡函数及用法实例分析

    JS自定义选项卡函数及用法实例分析

    这篇文章主要介绍了JS自定义选项卡函数及用法,以实例形式较为详细的分析了javascript自定义tab切换函数及使用方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • JS与Ajax Get和Post在使用上的区别实例详解

    JS与Ajax Get和Post在使用上的区别实例详解

    这篇文章主要介绍了JS与Ajax Get和Post在使用上的区别实例详解的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • 现代 JavaScript 开发编程风格Idiomatic.js指南中文版

    现代 JavaScript 开发编程风格Idiomatic.js指南中文版

    下面的章节描述的是一个 合理 的现代 JavaScript 开发风格指南，并非硬性规定。其想送出的核心理念是高度统一的代码风格（the law of code style consistency）。
    2014-05-05
  • 用js编写的简单的计算器代码程序

    用js编写的简单的计算器代码程序

    这篇文章主要介绍了用js编写的简单的计算器代码程序，非常具有实用性,感兴趣的小伙伴可以参考下
    2015-08-08
  • 解析John Resig Simple JavaScript Inheritance代码

    解析John Resig Simple JavaScript Inheritance代码

    上网也查了一下对些的理解说的都不是很清楚. 在翻阅的同时找到了一篇 分析这篇文章的文章 哈哈 分析的很详细. (Join Resig 大师的 "Simple Inheritance" 使用了很多有意思的技巧) 如果你有时间, 并对此感兴趣不访好好看看. 我相信多少会有所收益的.
    2012-12-12
  • CSS3+JavaScript实现翻页幻灯片效果

    CSS3+JavaScript实现翻页幻灯片效果

    这篇文章主要介绍了CSS3+JavaScript实现翻页幻灯片效果,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-06-06

最新评论