溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要詳解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) {
}
});至此，整個流程完結。
以上就是關于詳解JavaScript如何基于用戶照片姓名生成海報的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
