1，原生合成
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="html5、css3、jquery">
<meta name="description" content="一個前端工作者的學習筆記">
<title>Html5 Canvas 實現圖片合成 |</title>
<style>
img{ border:solid 1px #ddd;}
</style>
</head>
<body>
<div align="center">
<img src="./img/test1.jpg" width="300">
<img src="./img/test2.jpg" width="200">
</div>
<div id="imgBox" align="center">
<input type="button" value="一鍵合成" οnclick="hecheng()">
</div>
<script>
function hecheng(){
draw(function(){
document.getElementById('imgBox').innerHTML='<p style="padding:10px 0">合成圖片成功！可以鼠標另存圖片查看我是否是一張圖片~~！</p><img src="'+base64[0]+'">';
})
}
var data=['./img/test1.jpg','./img/test2.jpg'],base64=[];
function draw(fn){
var canvas=document.createElement('canvas'),
ctx=canvas.getContext('2d'),
len=data.length;
canvas.width=500;
canvas.height=700;
ctx.rect(0,0,canvas.width,canvas.height);
ctx.fillStyle='#fff';
ctx.fill();
function drawing(n){
if(n<len){
var img = new Image;
//img.crossOrigin = 'Anonymous'; //解決跨域
img.src=data[n];
img.οnlοad=function(){
if(n==1){
//drawImage(image, x, y, width, height)
ctx.drawImage(img,50,490,180,180);
ctx.fillStyle='#333333';
ctx.font="20px Arial";
//fillText(text,x,y)
ctx.fillText("Hello World!",50,480);
}
else{
ctx.drawImage(img,0,0,canvas.width,canvas.height);
}
drawing(n+1);//遞歸
}
}else{
//保存生成作品圖片
base64.push(canvas.toDataURL("image/jpeg",0.8));
//alert(JSON.stringify(base64));
fn();
}
}
drawing(0);
}
</script>
</body>
</html> 2，vue合成方式
<template>
<div class="img" id="imgBox">
</div>
</template>
<style>
.img{
width: 100vw;
height: 100vh;
}
.img img{
width: 100%;
height: 100vh;
display: block !important;
}
</style>
<script type="text/babel">
import {host,my_log,setData,getData,background_url} from '@/config/config'
export default{
data(){
return{
background_url:background_url,
code_url:getData('code_url'),
base64:[],
name:getData('name'),
code:getData('code'),
date:null,
number:null
}
},
created:function(){
my_log('background_url = '+this.background_url)
},
mounted:function(){
my_log('background_url = '+this.background_url)
my_log('code_url = '+this.code_url)
document.body.style.backgroundColor = '#ffffff'
this.init()
this.hecheng()
},
methods:{
hecheng(){
var _this = this
my_log('start')
this.draw(function(){
document.getElementById('imgBox').innerHTML='<img style="background:url('+_this.base64[0]+'); background-size:cover;">';
})
},
init(){
this.getDate()
},
getDate(){
this.date = this.getCurrenTime()
my_log('time = '+this.date)
},
getCurrenTime(){
var time = new Date();
this.number = time.getDate()
return time.getFullYear() + "年" + this.timeFill((time.getMonth() + 1)) + "月"
+ this.timeFill(time.getDate()) + "日 " + this.timeFill(time.getHours()) + ":"
+ this.timeFill(time.getMinutes()) + ":" + this.timeFill(time.getSeconds());
},
timeFill(value){
var str = '';
if(value<10){
str = str+'0';
}
return str+value;
} ,
draw(fn){
var data=[this.background_url,this.code_url],_this = this;
var canvas=document.createElement('canvas'),
ctx=canvas.getContext('2d'),
len=data.length;
// 生成圖片的大小
canvas.width=375;
canvas.height=667;
ctx.rect(0,0,canvas.width,canvas.height);
ctx.fillStyle='#fff';
ctx.fill();
function drawing(n){
if(n<len){
var img = new Image;
//img.crossOrigin = 'Anonymous'; //解決跨域
img.src=data[n];
img.οnlοad=function(){
if(n==1){
//drawImage(image, x, y, width, height)
// 二維碼圖
ctx.drawImage(img,20,470,130,130);
ctx.fillStyle='#8b0000';
ctx.font="90px Arial";
// 大日期
ctx.fillText(_this.number,30,370);
ctx.font="20px Arial";
//fillText(text,x,y)
// 年月日
ctx.fillText(_this.date,30,280);
// 名稱
ctx.fillText(_this.name,30,440);
ctx.font="14px Arial";
// 二維碼信息
ctx.fillText(_this.code,30,460);
}
else{
ctx.drawImage(img,0,0,canvas.width,canvas.height);
}
drawing(n+1);//遞歸
}
}else{
//保存生成作品圖片
_this.base64.push(canvas.toDataURL("image/jpeg",0.8));
//alert(JSON.stringify(base64));
fn();
}
}
drawing(0);
}
}
}
</script>
