先說下我的功能需求：
通過畫布，自定義一個區(qū)域大小，在這個區(qū)域內(nèi)：添加背景圖片、圖中圖疊加、畫內(nèi)外邊框、設(shè)置文字（文字的字體和大小顏色）
效果圖
背景圖片就是鳴人和雛田，右下角的屬于圖中圖疊加效果，左下和右下都是分別畫的兩個區(qū)域框
不需要用到上傳圖片功能的，這一步可以略過，直接看下面 canvasdiv() 方法
1.右下角的小圖，我做的是上傳圖片，上面有個附圖上傳的按鈕，這個用的是element-ui，代碼我貼下面了，也可以不選擇上傳，自己從本地獲取一張圖片也可以
<el-form-item label="附圖上傳" prop="dh">
<div>
<el-upload class="upload-demo" action="" :on-preview="handlePreview" :on-remove="handleRemove"
:before-remove="beforeRemove" :on-change="uploadTU" :auto-upload="false" :limit="1"
list-type="picture" :on-exceed="handleExceed" :file-list="fileList">
<el-button size="small" type="primary">點擊上傳附圖</el-button>
<div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>
</div>
</el-form-item>
//附圖上傳調(diào)用的方法，這里主要是獲取了圖片的地址，
//這里這個 this.futuimage 會在做附圖的時候用到，所以我這里要保存一下這個圖片地址
uploadTU(file, filelist) {
this.futuimage = file.url
},
畫布上圖、自定義文字、畫線
1.先定義一個canvas容器文章來源：http://www.zghlxwxcb.cn/news/detail-752033.html
<div id="div">
<canvas id="canvas"></canvas>
</div>
2.這個方法自己寫個點擊事件觸發(fā)，我是用按鈕觸發(fā)的，按鈕代碼我就不寫了文章來源地址http://www.zghlxwxcb.cn/news/detail-752033.html
//圖片生成pdn的方法
canvasdiv(dataUrl) {
var canvas = document.getElementById("canvas");
canvas.width = 1545;
canvas.height = 855;
var ctx = canvas.getContext("2d");
//這里就是背景圖，我獲取的是本地圖片
var image = new Image();
//這里可以放png圖片，也可以放圖片的base64
image.src = './img/beijingtu.png';
//圖例圖片
var tuli = new Image();
tuli.src = './img/xiao.png';
//附圖圖片
var futu = new Image();
futu.src = this.futuimage; //這個我放的是圖片的base64，主要給大家說明一下可以放這種類型數(shù)據(jù)
//從這一步開始，就開始畫布了，在畫布里設(shè)置圖片呀 文字呀 邊框呀
image.onload = function () {
var imgwidth = 1400; //背景圖寬度
var imgheight = 750; //背景圖高度
var left = (canvas.width - imgwidth) / 2;
var top = (canvas.height - imgheight) / 2;
//第一個參數(shù)image就是我讀取的本地png圖片，這里我試過放base64 也可以
//第二個參數(shù)left 就是 x坐標，第三個參數(shù)top就是 y坐標 ，坐標軸懂吧 x和y
//第四個和第五個參數(shù)就是背景圖的寬和高，單位是像素px
//多說一句第一個參數(shù) image 看你自己需求放什么，但是我發(fā)現(xiàn)base64圖片不能自適應(yīng)
ctx.drawImage(image, left, top, imgwidth, imgheight); //背景圖上圖到畫布
//外框
ctx.moveTo(left - 20, top - 20); //將畫筆移動到坐標 x和y
ctx.lineTo(left + imgwidth + 20, top - 20); //從畫筆位置繪制直線到坐標 x和y
ctx.lineTo(left + imgwidth + 20, top + imgheight + 20); //從當(dāng)前位置繪制直線到
ctx.lineTo(left - 20, top + imgheight + 20); //.從當(dāng)前位置...
ctx.closePath(); //閉合線條
ctx.lineWidth = 3; //線寬
ctx.strokeStyle = 'black'; //描邊顏色
ctx.stroke(); //渲染直線(描邊)
//最內(nèi)的框
ctx.moveTo(left, top); //將畫筆移動到坐標
ctx.lineTo(left + imgwidth, top); //從畫筆位置繪制直線到坐標
ctx.lineTo(left + imgwidth, top + imgheight); //從當(dāng)前位置繪制直線到
ctx.lineTo(left, top + imgheight); // 從當(dāng)前位置
ctx.closePath(); //閉合線條
ctx.lineWidth = 1; //線寬
ctx.strokeStyle = 'black'; //描邊顏色
ctx.stroke(); //渲染直線(描邊)
//看一下效果圖左下角有個圖例，背景色是白色，主要是填充區(qū)域顏色需要加這一行代碼
ctx.beginPath(); //開啟路徑繪制,不加它無法填充區(qū)域顏色，
ctx.moveTo(left, imgheight / 4 * 3 + top); //將畫筆移動到坐標
ctx.lineTo(left + this.tuli_width, imgheight / 4 * 3 + top); //從畫筆位置繪制直線到坐標
ctx.lineTo(left + this.tuli_width, imgheight + top); //從當(dāng)前位置繪制直線到
ctx.lineTo(left, imgheight + top); //.從當(dāng)前位置
ctx.closePath(); //閉合線條
ctx.fillStyle = 'white';
ctx.fill(); //設(shè)置封閉圖形填充
ctx.lineWidth = 1; //線寬
ctx.strokeStyle = 'black'; //描邊顏色
ctx.stroke(); //渲染直線(描邊)
//附圖
ctx.beginPath(); //開啟路徑繪制,不加它無法填充區(qū)域顏色
ctx.moveTo(imgwidth - 300 + left, imgheight / 4 * 3 + top); //將畫筆移動到坐標
ctx.lineTo(left + imgwidth, imgheight / 4 * 3 + top); //從畫筆位置繪制直線到坐標
ctx.lineTo(left + imgwidth, imgheight + top); //從當(dāng)前位置繪制直線到
ctx.lineTo(imgwidth - 300 + left, imgheight + top); //.從當(dāng)前位置
ctx.lineWidth = 1; //線寬
ctx.strokeStyle = 'black'; //描邊顏色
ctx.fillStyle = 'white';
ctx.fill(); //設(shè)置封閉圖形填充
ctx.stroke(); //渲染直線(描邊)
ctx.closePath(); //閉合線條
ctx.drawImage(futu, imgwidth - 300 + left, imgheight / 4 * 3 + top + 20, 300, imgheight / 4 - 20); //添加附圖圖片
//附圖倆字下面的橫線
ctx.moveTo(imgwidth - 300 + left, imgheight / 4 * 3 + top + 25); //將畫筆移動到坐標
ctx.lineTo(left + imgwidth, imgheight / 4 * 3 + top + 25);
ctx.lineWidth = 1; //線寬
ctx.strokeStyle = 'black'; //描邊顏色
ctx.stroke(); //渲染直線(描邊)
// 繪制文字(文本內(nèi)容，x坐標，y坐標)
ctx.font = "13px serif"; //文字大小
ctx.fillStyle = "black"; //文字顏色
ctx.textAlign = "center"; //文字居中
ctx.font = "23px 宋簡體"
ctx.fillText("標題", canvas.width / 2, canvas.height - 835);
ctx.font = "15px 黑體"
ctx.fillText("圖例", left + 75, imgheight / 4 * 3 + top + 17);
ctx.fillText("小圖區(qū)域", imgwidth - 150 + left, imgheight / 4 * 3 + top + 17);
ctx.font = "13px 黑體"
ctx.fillText("自定義文字", left - 10, canvas.height - 835);
ctx.fillText("1:50000", canvas.width / 2, canvas.height - 12);
ctx.fillText(that.getCurrentTime(), left + imgwidth - 20, canvas.height - 12);
ctx.fillText("XXX", left - 10, canvas.height - 12);
//展示生成后的圖片效果--第二張圖
var base64 = canvas.toDataURL();
document.getElementById("base64Img").src = base64;
const download = document.getElementById("download");
var ba64 = canvas.toDataURL("image/png");
// 點擊圖片下載
// canvas.onclick = function () {
// //download.click();
// var input1 = document.getElementById("upload");
// if (typeof FileReader === 'undefined') {
// alert("抱歉，你的瀏覽器不支持 FileReader");
// input1.setAttribute('disabled', 'disabled');
// } else {
// // console.log(typeof FileReader);
// input1.addEventListener('change', that.readFile(), false);
// /*input1.addEventListener('change',function (e){
// // console.log(e.target.files[0]);
// console.log(this.files[0]);
// },false); */
// }
// };
}
},
到了這里，關(guān)于canvas 自定義畫布，在畫布上增加（邊框 圖片 文字 ）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
