H5头像制作类的程序本以为到处都可以搜索到，可是真写这个项目的时候才发现太困难了，因为根本没有现成的功能模块可以拼凑，着实费了不少力气，好在最终圆满交工。
还是先看效果
源码获取渠道
小程序内联系客服
项目中功能点
看完效果是不是觉得实现还不错！！！
1、伪加载效果
2、上传图片后支持对图片的拖拽、缩放编辑
3、编辑后裁剪
4、裁剪后可添加装饰图标
5、装饰图标支持缩放、拖拽、旋转、取消等功能
6、摆放好图标后生成最终头像
7、对UI设计的还原
部分代码
代码量太大，只贴部分了，如果你需要整个源码，可
添加wx:New_SevenHan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>头像制作</title>
<style>
html, body {
margin: 0;
padding: 0;
}
.dome {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
background-color: #feb9cb;
width: 100%;
height: 100%;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.uploadContainer {
height: 50px;
/*line-height: 80px;*/
/* 切记position: relative一点要有 */
position: relative;
overflow: hidden;
text-align: center;
}
.uploadImg {
position: absolute;
height: 50px;
left: 0;
top: 0;
}
.makeAva {
height: 50px;
}
.cropper {
width: 100%;
/*line-height: 80px;*/
/* 切记position: relative一点要有 */
position: relative;
overflow: hidden;
text-align: center;
}
.img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.canvas {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.column{
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.ornamentItem{
width: 65px;
position: relative;
/*display: flex;*/
/*justify-content: center;*/
/*align-items: center;*/
/*flex-direction: row;*/
border-radius: 10px;
margin: 0 5px;
list-style:none; display:inline-block;
}
.loader{
width: 100%;
position: fixed;
z-index: 9999;
background-color: #feb9cb;
overflow:hidden;
}
.heartHat{
animation: heartHat 1.2s ease-in-out 2.8s infinite alternate;
}
@keyframes heartHat {
from {
transform: translate(0, 0) ;
}
to {
transform: translate(6px, 6px)
}
}
.heartPower{
animation: heartPower 1.5s ease-in-out 2.3s infinite alternate;
}
@keyframes heartPower {
from {
transform: translate(0, 0)
}
to {
transform: translate(6px, 0)
}
}
.heartHand{
animation: heartHand 1s ease-in-out 2.3s infinite alternate;
}
@keyframes heartHand {
from {
transform: translate(0, 0)
}
to {
transform: translate(0, 10px)
}
}
.heartGlasses{
animation: heartGlasses 1.3s ease-in-out 2.7s infinite alternate;
}
@keyframes heartGlasses {
from {
transform: translate(0, 0) rotate(-30deg)
}
to {
transform: translate(0, 6px) rotate(-30deg)
}
}
.previewContaier{
width: 100%;
background-color: black;
/*line-height: 80px;*/
/* 切记position: relative一点要有 */
position: fixed;
overflow: hidden;
text-align: center;
z-index: 1000;
}
.previewImage{
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.previewTip{
color: white;
width: 100%;
padding-top: 30px;
}
.previewCancel{
width: 100%;
}
.wave{
width: 100%;
@keyframes wave {
from {
transform: translate(0, 0)
}
to {
transform: translate(0, -60px)
}
}
.box { width:100%;white-space: nowrap;overflow-x: auto;-webkit-overflow-scrolling:touch; } /*注释1*/
.box::-webkit-scrollbar { width:0; height:0; display: none; } /*注释2*/
</style>
</head>
<body>
<div class="loader" style="background-color: #feb9cb;" id="loader">
<img src="../../images/wave.png" id="wave" style="display:none;height:500px;position: fixed;z-index: 10001;"/>
<img src="../../images/loadingBg.png" id="loadingBg" style="width:100%;height:100%;position: fixed;z-index: 10001;left: 0;top:0;" />
<div style="width:100%;text-align:center;color:white;font-size: 28px;font-weight:600;position: fixed;z-index: 10001;display:flex;justify-content: center;align-items: center;flex-direction: row " id="loadingText">
<img src="../../images/loadingstart.png" id="loadingstart">
<div id="loadingText1">0%</div>
</div>
</div>
<audio id="music" autoplay preload src="../../images/music.mp3" loop></audio>
<div class="dome" id="app">
<div class="previewContaier" id="previewContainer" style="display: none">
<div class="previewCancel" id="previewCancel" @click="cancelPreview()"></div>
<img class="previewImage" id="allImg" />
<div class="previewTip" id="previewTip" @click="cancelPreview()">长按图片保存到本地</div>
</div>
<div class="cropper" id="cropper">
<canvas id="puzzleAllCanvas" class="canvas"></canvas>
<canvas id="puzzleCanvas" class="canvas"></canvas>
<canvas id='cvs' class="canvas" ></canvas>
<!-- <img src="../../images/flag.png" class="flag" id="flag"/>-->
<!-- <img src="../../images/logo.png" class="logo" id="logo"/>-->
<img src="../../images/hat1.png" id="heartHat" class="heartHat" style="position:absolute"/>
<img src="../../images/power1.png" id="heartPower" class="heartPower" style="position:absolute"/>
<img src="../../images/hand1.png" id="heartHand" class="heartHand" style="position:absolute"/>
<img src="../../images/glasses1.png" id="heartGlasses" class="heartGlasses" style="position:absolute;transform: rotate(-30deg)"/>
</div>
<div style='display: none'>
<img id='jewelry' src='' alt=''/>
<img class='glasses' id='glasses' src='../../images/glasses1.png'/>
<img class='power' id='power' src='../../images/power1.png'/>
<img class='hat' id='hat' src='../../images/hat1.png'/>
<img class='hand' id='hand' src='../../images/hand1.png'/>
<img class='pic01' id='pic01' src='../../images/pic01.png'/>
<img class='pic02' id='pic02' src='../../images/pic02.png'/>
<img class='pic03' id='pic03' src='../../images/pic03.png'/>
<img class='pic04' id='pic04' src='../../images/pic04.png'/>
<img class='pic05' id='pic05' src='../../images/pic05.png'/>
<img class='pic06' id='pic06' src='../../images/pic06.png'/>
<img class='pic07' id='pic07' src='../../images/pic07.png'/>
<img class='pic08' id='pic08' src='../../images/pic08.png'/>
</div>
<div v-if="!isAdded" class="column" id="operationArea1" style="">
<img :src="slogan" class="slogan" id="slogan"/>
<div class="uploadContainer" id="upload">
<img :src="uploadImg" class="uploadImg" id="uploadImg"/>
<!-- option是配置，格式是对象，getbase64Data是组件的一个方法获取裁剪完的头像 -->
<h5-cropper id="uploadCropper" @getbase64="getbase64Data" @getblob="getBlob"
@get-file="getFile"></h5-cropper>
</div>
</div>
<div v-if="isAdded" class="column" id="operationArea2" style="background-color: #3f282e;">
<div class="box" id="operationArea2Row" style="">
<div class="ornamentItem" id="ornamentItem1" style="margin-left: 20px" @click="changeGlasses()" >
<img src="../../images/item1.png" style="width: 100%;position: absolute"/>
<img src="../../images/glasses1.png" style="width: 100%;position: absolute"/>
</div>
<div class="ornamentItem" id="ornamentItem2" @click="changePower()">
<img src="../../images/item1.png" style="width: 100%;position: absolute"/>
<img src="../../images/power1.png" style="width: 100%;position: absolute"/>
</div>
<div class="ornamentItem" id="ornamentItem3" @click="changeHand()" >
<img src="../../images/item1.png" style="width: 100%;position: absolute"/>
<img src="../../images/hand1.png" style="width: 100%;position: absolute"/>
</div>
<div class="ornamentItem" id="ornamentItem4" @click="changeHat()" >
<img src="../../images/item1.png" style="width: 100%;position: absolute"/>
<img src="../../images/hat1.png" style="width: 100%;position: absolute"/>
</div>
<div class="ornamentItem" id="ornamentItem5" @click="changePic01()" >
<img src="../../images/item1.png" style="width: 100%;position: absolute"/>
<img src="../../images/pic01.png" style="width: 100%;position: absolute"/>
</div>
<div class="ornamentItem" id="ornamentItem6" @click="changePic02()">
<img src="../../images/item1.png" style="width: 100%;position: absolute"/>
<img src="../../images/pic02.png" style="width: 100%;position: absolute"/>
</div>
<div class="ornamentItem" id="ornamentItem7" @click="changePic03()" >
<img src="../../images/item1.png" style="width: 100%;position: absolute"/>
<img src="../../images/pic03.png" style="width: 100%;position: absolute"/>
</div>
<div class="ornamentItem" id="ornamentItem8" @click="changePic04()" >
<img src="../../images/item1.png" style="width: 100%;position: absolute"/>
<img src="../../images/pic04.png" style="width: 100%;position: absolute"/>
</div>
<div class="ornamentItem" id="ornamentItem9" @click="changePic05()" >
<img src="../../images/item1.png" style="width: 100%;position: absolute"/>
<img src="../../images/pic05.png" style="width: 100%;position: absolute"/>
</div>
<div class="ornamentItem" id="ornamentItem10" @click="changePic06()">
<img src="../../images/item1.png" style="width: 100%;position: absolute"/>
<img src="../../images/pic6.png" style="width: 100%;position: absolute"/>
</div>
<div class="ornamentItem" id="ornamentItem11" @click="changePic07()" >
<img src="../../images/item1.png" style="width: 100%;position: absolute"/>
<img src="../../images/pic7.png" style="width: 100%;position: absolute"/>
</div>
<div class="ornamentItem" id="ornamentItem12" @click="changePic08()" style="margin-right: 20px">
<img src="../../images/item1.png" style="width: 100%;position: absolute"/>
<img src="../../images/pic8.png" style="width: 100%;position: absolute"/>
</div>
</div>
<div class="row" id="operationArea2Row1" >
<div class="uploadContainer" id="reUploadContainer">
<img :src="reUpload" class="uploadImg" id="reUploadImg"/>
<!-- option是配置，格式是对象，getbase64Data是组件的一个方法获取裁剪完的头像 -->
<h5-cropper id="reUploadCropper" @getbase64="getbase64Data" @getblob="getBlob"
@get-file="getFile"></h5-cropper>
</div>
<img :src="makeAva" class="makeAva" id="makeAva" style="margin-left: 15px" @click="previewImg()"/>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: function () {
return {
// img: "../../images/oriImg.jpg",
ratio:0,
img: "http://geren.yi-school.top/images/logo.png",
imgModal: "../../images/modal.png",
slogan: "../../images/slogan.png",
uploadImg: "../../images/uploadImg.png",
reUpload: "../../images/reUpload.png",
makeAva: "../../images/makeAva.png",
isAdded: false,
isShowPuzzle:true,
puzzleCanvas:document.getElementById('puzzleCanvas'),
cvs:document.getElementById("cvs"),
cxt:document.getElementById("cvs").getContext("2d"),
screenWidth: window.screen.width < 500 ? window.screen.width : 300,
canvasFabric: {},
isInitCanvasFabric:false,
glassesInstance: {},
glasses: "glasses",
isGlassesAdded:false,
powerInstance: {},
power:'power',
isPowerAdded:false,
hatInstance: {},
hat:'hat',
isHatAdded:false,
handInstance: {},
hand:'hand',
isHandAdded:false,
pic01Instance: {},
pic01: "pic01",
isPic01Added:false,
pic02Instance: {},
pic02: "pic02",
isPic02Added:false,
pic03Instance: {},
pic03: "pic03",
isPic03Added:false,
pic04Instance: {},
pic04: "pic04",
isPic04Added:false,
pic05Instance: {},
pic05: "pic05",
isPic05Added:false,
pic06Instance: {},
pic06: "pic06",
isPic06Added:false,
pic07Instance: {},
pic07: "pic07",
isPic07Added:false,
pic08Instance: {},
pic08: "pic08",
isPic08Added:false,
loadingNum:0,
waveLeft:0,
}
},
beforeCreate: function () {
},
created: function () {
this.ratio = document.body.clientWidth/750
this.autoPlayAudio();
document.getElementById("loadingstart").style.height = 56*this.ratio+"px"
document.getElementById("wave").style.height = (1000*this.ratio)+"px"
document.getElementById("loadingText").style.fontSize = (50*this.ratio)+"px"
document.getElementById("wave").style.top = window.innerHeight+"px"
document.getElementById("loadingBg").style.width = document.body.clientWidth+"px"
document.getElementById("loadingBg").style.height = window.innerHeight+"px"
document.getElementById('loadingBg').onload= function () {
document.getElementById('wave').style.display = "block"
}
document.getElementById("loadingText").style.top = (window.innerHeight*3/5+10)+"px"
this.timer = setInterval(this.startLoading, 15)
document.getElementById("cropper").style.height = document.body.clientWidth + "px"
// document.getElementById("flag").style.height = 56*this.ratio+"px"
// document.getElementById("flag").style.top = 70*this.ratio+"px"
// document.getElementById("logo").style.height = 147*this.ratio + "px"
// document.getElementById("logo").style.top = 40*this.ratio + "px"
// document.getElementById("logo").style.right = 40*this.ratio+"px"
document.getElementById('heartHat').style.width = 130*this.ratio+"px"
document.getElementById("heartHat").style.right = 310*this.ratio+"px"
document.getElementById("heartHat").style.top = 160*this.ratio+"px"
document.getElementById('heartGlasses').style.width = 130*this.ratio+"px"
document.getElementById("heartGlasses").style.left = 120*this.ratio+"px"
document.getElementById("heartGlasses").style.top = 280*this.ratio+"px"
document.getElementById('heartHand').style.width = 130*this.ratio+"px"
document.getElementById("heartHand").style.right = 30*this.ratio+"px"
document.getElementById("heartHand").style.bottom = 50*this.ratio+"px"
document.getElementById('heartPower').style.width = 130*this.ratio+"px"
document.getElementById("heartPower").style.left = 40*this.ratio+"px"
document.getElementById("heartPower").style.bottom = 40*this.ratio+"px"
document.getElementById("slogan").style.height = 237*this.ratio+"px"
document.getElementById("slogan").style.marginTop = 20*this.ratio+"px"
document.getElementById("upload").style.marginTop = 20*this.ratio+"px"
document.getElementById('uploadCropper').style.width = 411*this.ratio+"px"
document.getElementById("uploadCropper").style.height = 100*this.ratio+"px"
document.getElementById("uploadImg").style.height = 100*this.ratio+"px"
document.getElementById("operationArea2Row").style.marginTop = 30*this.ratio+"px"
document.getElementById("ornamentItem1").style.width = document.getElementById("ornamentItem1").style.height = document.getElementById("ornamentItem2").style.width = document.getElementById("ornamentItem2").style.height = document.getElementById("ornamentItem3").style.width = document.getElementById("ornamentItem3").style.height = document.getElementById("ornamentItem4").style.width = document.getElementById("ornamentItem4").style.height = document.getElementById("ornamentItem5").style.width = document.getElementById("ornamentItem5").style.height = document.getElementById("ornamentItem6").style.width = document.getElementById("ornamentItem6").style.height = 131*this.ratio+"px"
document.getElementById("ornamentItem7").style.width = document.getElementById("ornamentItem7").style.height = document.getElementById("ornamentItem8").style.width = document.getElementById("ornamentItem8").style.height = document.getElementById("ornamentItem9").style.width = document.getElementById("ornamentItem9").style.height = document.getElementById("ornamentItem10").style.width = document.getElementById("ornamentItem10").style.height = document.getElementById("ornamentItem11").style.width = document.getElementById("ornamentItem11").style.height = document.getElementById("ornamentItem12").style.width = document.getElementById("ornamentItem12").style.height = 131*this.ratio+"px"
document.getElementById("operationArea2Row1").style.marginTop = 30*this.ratio+"px"
document.getElementById("reUploadContainer").style.height = 100*this.ratio+"px"
document.getElementById("reUploadImg").style.height = 100*this.ratio+"px"
document.getElementById("reUploadCropper").style.width = 292*this.ratio+"px"
document.getElementById("reUploadCropper").style.height = 100*this.ratio+"px"
document.getElementById("makeAva").style.height = 100*this.ratio+"px"
this.cvs.style.width = this.cvs.style.height = document.body.clientWidth + "px"
this.puzzleCanvas.style.width = this.puzzleCanvas.style.height = document.body.clientWidth + "px"
document.getElementById("loader").style.width = document.getElementById("loadingBg").style.width = app.style.width = document.body.clientWidth + "px";
document.getElementById("loader").style.height = document.getElementById("loadingBg").style.height = app.style.height = (window.innerHeight) + "px"
document.getElementById('operationArea1').style.height = (window.innerHeight-document.body.clientWidth)+'px'
document.getElementById('operationArea2').style.height = (window.innerHeight-document.body.clientWidth)+'px'
document.getElementById('previewContainer').style.height = (window.innerHeight)+'px'
document.getElementById('previewContainer').style.width = document.body.clientWidth+'px'
document.getElementById('allImg').style.top = (window.innerHeight/2-document.body.clientWidth/2)+'px'
document.getElementById('previewTip').style.marginTop = document.body.clientWidth +'px'
document.getElementById('previewCancel').style.height = (window.innerHeight/2-document.body.clientWidth/2)+'px'
document.getElementById('previewTip').style.height = (window.innerHeight-(window.innerHeight/2-document.body.clientWidth/2)-document.body.clientWidth)+"px"
},
beforeMount: function () {
},
mounted: function () {
const that = this
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
})()
}
var imgsrcArray = [
'../../images/oriImg.jpeg',
"../../images/modal.png",
// '../../images/flag.png',
// '../../images/logo.png'
];
this.drawCanvas(imgsrcArray)
},
beforeUpdate: function () {
},
updated: function () {
},
beforeDestroy: function () {
},
destroyed: function () {
},
methods: {
startLoading(){
this.loadingNum++
document.getElementById("loadingText1").textContent = this.loadingNum+"%"
if(this.loadingNum>10){
document.getElementById('wave').style.top = (window.innerHeight*3/5-this.loadingNum*2.4)+"px"
}
document.getElementById('wave').style.left = -this.loadingNum*5+"px"
if(this.loadingNum>99){
clearInterval(this.timer)
let loader = document.getElementById('loader')
if(loader!=null){
document.body.removeChild(loader)
}
}
},
autoPlayAudio() {
wx.config({
debug: false
});
wx.ready(function() {
document.getElementById("music").play();
});
},
changePic08(){
if(this.isInitCanvasFabric){
if(this.isPic08Added){
this.isPic08Added=false
this.removePic08()
}else{
this.isPic08Added = true
this.addPic08()
}
}else{
var img = new Image();
img.src = "data:image/jpeg;base64,"+this.downloadUrl;
var that = this
img.onload = function () {
that.img2Cvs(img)
if(that.isPic08Added){
that.isPic08Added=false
that.removePic08()
}else{
that.isPic08Added = true
that.addPic08()
}
}
}
},
removePic08(){
if (this.pic08Instance) {
this.canvasFabric.remove(this.pic08Instance)
}
},
addPic08(){
var that = this
document.getElementById(that.pic08).style.display = "none";
var pic08Image = document.getElementById(that.pic08);
pic08Image.style.display = "block";
if (that.pic08Instance) {
that.canvasFabric.remove(that.pic08Instance)
}
that.pic08Instance = new fabric.Image(pic08Image, {
top: 40,
left: that.screenWidth / 3,
scaleX: 100 / pic08Image.width,
scaleY: 100 / pic08Image.height,
cornerColor: "#0b3a42",
cornerStrokeColor: "#fff",
cornerStyle: "circle",
transparentCorners: false,
rotatingPointOffset: 30
});
that.pic08Instance.setControlVisible("bl", false);
that.pic08Instance.setControlVisible("tr", false);
that.pic08Instance.setControlVisible("tl", false);
that.pic08Instance.setControlVisible("mr", false);
that.pic08Instance.setControlVisible("mt", false);
that.canvasFabric.add(that.pic08Instance)
},
changePic07(){
if(this.isInitCanvasFabric){
if(this.isPic07Added){
this.isPic07Added=false
this.removePic07()
}else{
this.isPic07Added = true
this.addPic07()
}
}else{
var img = new Image();
img.src = "data:image/jpeg;base64,"+this.downloadUrl;
var that = this
img.onload = function () {
that.img2Cvs(img)
if(that.isPic07Added){
that.isPic07Added=false
that.removePic07()
}else{
that.isPic07Added = true
that.addPic07()
}
}
}
},
removePic07(){
if (this.pic07Instance) {
this.canvasFabric.remove(this.pic07Instance)
}
},
addPic07(){
var that = this
document.getElementById(that.pic07).style.display = "none";
var pic07Image = document.getElementById(that.pic07);
pic07Image.style.display = "block";
if (that.pic07Instance) {
that.canvasFabric.remove(that.pic07Instance)
}
that.pic07Instance = new fabric.Image(pic07Image, {
top: 40,
left: that.screenWidth / 3,
scaleX: 100 / pic07Image.width,
scaleY: 100 / pic07Image.height,
cornerColor: "#0b3a42",
cornerStrokeColor: "#fff",
cornerStyle: "circle",
transparentCorners: false,
rotatingPointOffset: 30
});
that.pic07Instance.setControlVisible("bl", false);
that.pic07Instance.setControlVisible("tr", false);
that.pic07Instance.setControlVisible("tl", false);
that.pic07Instance.setControlVisible("mr", false);
that.pic07Instance.setControlVisible("mt", false);
that.canvasFabric.add(that.pic07Instance)
},
changePic06(){
if(this.isInitCanvasFabric){
if(this.isPic06Added){
this.isPic06Added=false
this.removePic06()
}else{
this.isPic06Added = true
this.addPic06()
}
}else{
var img = new Image();
img.src = "data:image/jpeg;base64,"+this.downloadUrl;
var that = this
img.onload = function () {
that.img2Cvs(img)
if(that.isPic06Added){
that.isPic06Added=false
that.removePic06()
}else{
that.isPic06Added = true
that.addPic06()
}
}
}
},
removePic06(){
if (this.pic06Instance) {
this.canvasFabric.remove(this.pic06Instance)
}
},
addPic06(){
var that = this
document.getElementById(that.pic06).style.display = "none";
var pic06Image = document.getElementById(that.pic06);
pic06Image.style.display = "block";
if (that.pic06Instance) {
that.canvasFabric.remove(that.pic06Instance)
}
that.pic06Instance = new fabric.Image(pic06Image, {
top: 40,
left: that.screenWidth / 3,
scaleX: 100 / pic06Image.width,
scaleY: 100 / pic06Image.height,
cornerColor: "#0b3a42",
cornerStrokeColor: "#fff",
cornerStyle: "circle",
transparentCorners: false,
rotatingPointOffset: 30
});
that.pic06Instance.setControlVisible("bl", false);
that.pic06Instance.setControlVisible("tr", false);
that.pic06Instance.setControlVisible("tl", false);
that.pic06Instance.setControlVisible("mr", false);
that.pic06Instance.setControlVisible("mt", false);
that.canvasFabric.add(that.pic06Instance)
},
changePic05(){
if(this.isInitCanvasFabric){
if(this.isPic05Added){
this.isPic05Added=false
this.removePic05()
}else{
this.isPic05Added = true
this.addPic05()
}
}else{
var img = new Image();
img.src = "data:image/jpeg;base64,"+this.downloadUrl;
var that = this
img.onload = function () {
that.img2Cvs(img)
if(that.isPic05Added){
that.isPic05Added=false
that.removePic05()
}else{
that.isPic05Added = true
that.addPic05()
}
}
}
},
removePic05(){
if (this.pic05Instance) {
this.canvasFabric.remove(this.pic05Instance)
}
},
addPic05(){
var that = this
document.getElementById(that.pic05).style.display = "none";
var pic05Image = document.getElementById(that.pic05);
pic05Image.style.display = "block";
if (that.pic05Instance) {
that.canvasFabric.remove(that.pic05Instance)
}
that.pic05Instance = new fabric.Image(pic05Image, {
top: 40,
left: that.screenWidth / 3,
scaleX: 100 / pic05Image.width,
scaleY: 100 / pic05Image.height,
cornerColor: "#0b3a42",
cornerStrokeColor: "#fff",
cornerStyle: "circle",
transparentCorners: false,
rotatingPointOffset: 30
});
that.pic05Instance.setControlVisible("bl", false);
that.pic05Instance.setControlVisible("tr", false);
that.pic05Instance.setControlVisible("tl", false);
that.pic05Instance.setControlVisible("mr", false);
that.pic05Instance.setControlVisible("mt", false);
that.canvasFabric.add(that.pic05Instance)
},
changePic04(){
if(this.isInitCanvasFabric){
if(this.isPic04Added){
this.isPic04Added=false
this.removePic04()
}else{
this.isPic04Added = true
this.addPic04()
}
}else{
var img = new Image();
img.src = "data:image/jpeg;base64,"+this.downloadUrl;
var that = this
img.onload = function () {
that.img2Cvs(img)
if(that.isPic04Added){
that.isPic04Added=false
that.removePic04()
}else{
that.isPic04Added = true
that.addPic04()
}
}
}
},
removePic04(){
if (this.pic04Instance) {
this.canvasFabric.remove(this.pic04Instance)
}
},
addPic04(){
var that = this
document.getElementById(that.pic04).style.display = "none";
var pic04Image = document.getElementById(that.pic04);
pic04Image.style.display = "block";
if (that.pic04Instance) {
that.canvasFabric.remove(that.pic04Instance)
}
that.pic04Instance = new fabric.Image(pic04Image, {
top: 40,
left: that.screenWidth / 3,
scaleX: 100 / pic04Image.width,
scaleY: 100 / pic04Image.height,
cornerColor: "#0b3a42",
cornerStrokeColor: "#fff",
cornerStyle: "circle",
transparentCorners: false,
rotatingPointOffset: 30
});
that.pic04Instance.setControlVisible("bl", false);
that.pic04Instance.setControlVisible("tr", false);
that.pic04Instance.setControlVisible("tl", false);
that.pic04Instance.setControlVisible("mr", false);
that.pic04Instance.setControlVisible("mt", false);
that.canvasFabric.add(that.pic04Instance)
},
changePic03(){
if(this.isInitCanvasFabric){
if(this.isPic03Added){
this.isPic03Added=false
this.removePic03()
}else{
this.isPic03Added = true
this.addPic03()
}
}else{
var img = new Image();
img.src = "data:image/jpeg;base64,"+this.downloadUrl;
var that = this
img.onload = function () {
that.img2Cvs(img)
if(that.isPic03Added){
that.isPic03Added=false
that.removePic03()
}else{
that.isPic03Added = true
that.addPic03()
}
}
}
},
removePic03(){
if (this.pic03Instance) {
this.canvasFabric.remove(this.pic03Instance)
}
},
addPic03(){
var that = this
document.getElementById(that.pic03).style.display = "none";
var pic03Image = document.getElementById(that.pic03);
pic03Image.style.display = "block";
if (that.pic03Instance) {
that.canvasFabric.remove(that.pic03Instance)
}
that.pic03Instance = new fabric.Image(pic03Image, {
top: 40,
left: that.screenWidth / 3,
scaleX: 100 / pic03Image.width,
scaleY: 100 / pic03Image.height,
cornerColor: "#0b3a42",
cornerStrokeColor: "#fff",
cornerStyle: "circle",
transparentCorners: false,
rotatingPointOffset: 30
});
that.pic03Instance.setControlVisible("bl", false);
that.pic03Instance.setControlVisible("tr", false);
that.pic03Instance.setControlVisible("tl", false);
that.pic03Instance.setControlVisible("mr", false);
that.pic03Instance.setControlVisible("mt", false);
that.canvasFabric.add(that.pic03Instance)
},
changePic02(){
if(this.isInitCanvasFabric){
if(this.isPic02Added){
this.isPic02Added=false
this.removePic02()
}else{
this.isPic02Added = true
this.addPic02()
}
}else{
var img = new Image();
img.src = "data:image/jpeg;base64,"+this.downloadUrl;
var that = this
img.onload = function () {
that.img2Cvs(img)
if(that.isPic02Added){
that.isPic02Added=false
that.removePic02()
}else{
that.isPic02Added = true
that.addPic02()
}
}
}
},
removePic02(){
if (this.pic02Instance) {
this.canvasFabric.remove(this.pic02Instance)
}
},
addPic02(){
var that = this
document.getElementById(that.pic02).style.display = "none";
var pic02Image = document.getElementById(that.pic02);
pic02Image.style.display = "block";
if (that.pic02Instance) {
that.canvasFabric.remove(that.pic02Instance)
}
that.pic02Instance = new fabric.Image(pic02Image, {
top: 40,
left: that.screenWidth / 3,
scaleX: 100 / pic02Image.width,
scaleY: 100 / pic02Image.height,
cornerColor: "#0b3a42",
cornerStrokeColor: "#fff",
cornerStyle: "circle",
transparentCorners: false,
rotatingPointOffset: 30
});
that.pic02Instance.setControlVisible("bl", false);
that.pic02Instance.setControlVisible("tr", false);
that.pic02Instance.setControlVisible("tl", false);
that.pic02Instance.setControlVisible("mr", false);
that.pic02Instance.setControlVisible("mt", false);
that.canvasFabric.add(that.pic02Instance)
},
changePic01(){
if(this.isInitCanvasFabric){
if(this.isPic01Added){
this.isPic01Added=false
this.removePic01()
}else{
this.isPic01Added = true
this.addPic01()
}
}else{
var img = new Image();
img.src = "data:image/jpeg;base64,"+this.downloadUrl;
var that = this
img.onload = function () {
that.img2Cvs(img)
if(that.isPic01Added){
that.isPic01Added=false
that.removePic01()
}else{
that.isPic01Added = true
that.addPic01()
}
}
}
},
removePic01(){
if (this.pic01Instance) {
this.canvasFabric.remove(this.pic01Instance)
}
},
addPic01(){
var that = this
document.getElementById(that.pic01).style.display = "none";
var pic01Image = document.getElementById(that.pic01);
pic01Image.style.display = "block";
if (that.pic01Instance) {
that.canvasFabric.remove(that.pic01Instance)
}
that.pic01Instance = new fabric.Image(pic01Image, {
top: 40,
left: that.screenWidth / 3,
scaleX: 100 / pic01Image.width,
scaleY: 100 / pic01Image.height,
cornerColor: "#0b3a42",
cornerStrokeColor: "#fff",
cornerStyle: "circle",
transparentCorners: false,
rotatingPointOffset: 30
});
that.pic01Instance.setControlVisible("bl", false);
that.pic01Instance.setControlVisible("tr", false);
that.pic01Instance.setControlVisible("tl", false);
that.pic01Instance.setControlVisible("mr", false);
that.pic01Instance.setControlVisible("mt", false);
that.canvasFabric.add(that.pic01Instance)
},
changeGlasses(){
if(this.isInitCanvasFabric){
if(this.isGlassesAdded){
this.isGlassesAdded=false
this.removeGlasses()
}else{
this.isGlassesAdded = true
this.addGlasses()
}
}else{
var img = new Image();
img.src = "data:image/jpeg;base64,"+this.downloadUrl;
var that = this
img.onload = function () {
that.img2Cvs(img)
if(that.isGlassesAdded){
that.isGlassesAdded=false
that.removeGlasses()
}else{
that.isGlassesAdded = true
that.addGlasses()
}
}
}
},
removeGlasses(){
if (this.glassesInstance) {
this.canvasFabric.remove(this.glassesInstance)
}
},
addGlasses(){
var that = this
document.getElementById(that.glasses).style.display = "none";
var glassesImage = document.getElementById(that.glasses);
glassesImage.style.display = "block";
if (that.glassesInstance) {
that.canvasFabric.remove(that.glassesInstance)
}
that.glassesInstance = new fabric.Image(glassesImage, {
top: 40,
left: that.screenWidth / 3,
scaleX: 100 / glassesImage.width,
scaleY: 100 / glassesImage.height,
cornerColor: "#0b3a42",
cornerStrokeColor: "#fff",
cornerStyle: "circle",
transparentCorners: false,
rotatingPointOffset: 30
});
that.glassesInstance.setControlVisible("bl", false);
that.glassesInstance.setControlVisible("tr", false);
that.glassesInstance.setControlVisible("tl", false);
that.glassesInstance.setControlVisible("mr", false);
that.glassesInstance.setControlVisible("mt", false);
that.canvasFabric.add(that.glassesInstance)
},
changePower(){
if(this.isInitCanvasFabric){
if(this.isPowerAdded){
this.isPowerAdded=false
this.removePower()
}else{
this.isPowerAdded = true
this.addPower()
}
}else{
var img = new Image();
img.src = "data:image/jpeg;base64,"+this.downloadUrl;
var that = this
img.onload = function () {
that.img2Cvs(img)
if(that.isPowerAdded){
that.isPowerAdded=false
that.removePower()
}else{
that.isPowerAdded = true
that.addPower()
}
}
}
},
removePower(){
if (this.powerInstance) {
this.canvasFabric.remove(this.powerInstance)
}
},
addPower(){
var that = this
document.getElementById(that.power).style.display = "none";
var powerImage = document.getElementById(that.power);
powerImage.style.display = "block";
if (that.powerInstance) {
that.canvasFabric.remove(that.powerInstance)
}
that.powerInstance = new fabric.Image(powerImage, {
top: 40,
left: that.screenWidth / 3,
scaleX: 100 / powerImage.width,
scaleY: 100 / powerImage.height,
cornerColor: "#0b3a42",
cornerStrokeColor: "#fff",
cornerStyle: "circle",
transparentCorners: false,
rotatingPointOffset: 30
});
that.powerInstance.setControlVisible("bl", false);
that.powerInstance.setControlVisible("tr", false);
that.powerInstance.setControlVisible("tl", false);
that.powerInstance.setControlVisible("mr", false);
that.powerInstance.setControlVisible("mt", false);
that.canvasFabric.add(that.powerInstance)
},
changeHat(){
if(this.isInitCanvasFabric){
if(this.isHatAdded){
this.isHatAdded=false
this.removeHat()
}else{
this.isHatAdded = true
this.addHat()
}
}else{
var img = new Image();
img.src = "data:image/jpeg;base64,"+this.downloadUrl;
var that = this
img.onload = function () {
that.img2Cvs(img)
if(that.isHatAdded){
that.isHatAdded=false
that.removeHat()
}else{
that.isHatAdded = true
that.addHat()
}
}
}
},
removeHat(){
if (this.hatInstance) {
this.canvasFabric.remove(this.hatInstance)
}
},
addHat(){
var that = this
document.getElementById(that.hat).style.display = "none";
var hatImage = document.getElementById(that.hat);
hatImage.style.display = "block";
if (that.hatInstance) {
that.canvasFabric.remove(that.hatInstance)
}
that.hatInstance = new fabric.Image(hatImage, {
top: 40,
left: that.screenWidth / 3,
scaleX: 100 / hatImage.width,
scaleY: 100 / hatImage.height,
cornerColor: "#0b3a42",
cornerStrokeColor: "#fff",
cornerStyle: "circle",
transparentCorners: false,
rotatingPointOffset: 30
});
that.hatInstance.setControlVisible("bl", false);
that.hatInstance.setControlVisible("tr", false);
that.hatInstance.setControlVisible("tl", false);
that.hatInstance.setControlVisible("mr", false);
that.hatInstance.setControlVisible("mt", false);
that.canvasFabric.add(that.hatInstance)
},
changeHand(){
if(this.isInitCanvasFabric){
if(this.isHandAdded){
this.isHandAdded=false
this.removeHand()
}else{
this.isHandAdded = true
this.addHand()
}
}else{
var img = new Image();
img.src = "data:image/jpeg;base64,"+this.downloadUrl;
var that = this
img.onload = function () {
that.img2Cvs(img)
if(that.isHandAdded){
that.isHandAdded=false
that.removeHand()
}else{
that.isHandAdded = true
that.addHand()
}
}
}
},
removeHand(){
if (this.handInstance) {
this.canvasFabric.remove(this.handInstance)
}
},
addHand(){
var that = this
document.getElementById(that.hand).style.display = "none";
var handImage = document.getElementById(that.hand);
handImage.style.display = "block";
if (that.handInstance) {
that.canvasFabric.remove(that.handInstance)
}
that.handInstance = new fabric.Image(handImage, {
top: 40,
left: that.screenWidth / 3,
scaleX: 100 / handImage.width,
scaleY: 100 / handImage.height,
cornerColor: "#0b3a42",
cornerStrokeColor: "#fff",
cornerStyle: "circle",
transparentCorners: false,
rotatingPointOffset: 30
});
that.handInstance.setControlVisible("bl", false);
that.handInstance.setControlVisible("tr", false);
that.handInstance.setControlVisible("tl", false);
that.handInstance.setControlVisible("mr", false);
that.handInstance.setControlVisible("mt", false);
that.canvasFabric.add(that.handInstance)
},
img2Cvs(img) {
var that = this
that.cvs.width = img.width;
that.cvs.height = img.height;
that.cvs.style.display = "block";
that.canvasFabric = new fabric.Canvas("cvs", {
width: that.screenWidth,
height: that.screenWidth,
backgroundImage: new fabric.Image(img, {
scaleX: that.screenWidth / img.width,
scaleY: that.screenWidth / img.height
})
});
that.isInitCanvasFabric=true;
},
getbase64Data(data) {
this.isAdded = true
document.getElementById('heartHat').style.display = "none"
document.getElementById('heartHand').style.display = "none"
document.getElementById('heartGlasses').style.display = "none"
document.getElementById('heartPower').style.display = "none"
var imgsrcArray = [
data,
"../../images/modal.png",
];
this.drawCanvas(imgsrcArray)
},
getBlob(blob) {
console.log(blob)
},
getFile(file) {
console.log(file)
},
drawCanvas(imgsrcArray) {
var self = this;
var canvas = document.getElementById('puzzleCanvas');
var ctx = canvas.getContext('2d');
canvas.width = document.body.clientWidth*6
canvas.height = document.body.clientWidth*6;
var imglen = imgsrcArray.length;
var drawimg = (function f(n) {
if (n < imglen) {
var img = new Image();
img.crossOrigin = 'Anonymous'; //解决跨域问题
img.onload = function () {
//ctx.save();
if (n == 0) {
ctx.drawImage(img, 0, 0, canvas.width, canvas.width);
} else if(n==1) {
ctx.drawImage(img, 0, 0, canvas.width, canvas.width);
}else if(n==2){
ctx.drawImage(img,0,30,202*self.ratio,56*self.ratio)
}else{
ctx.drawImage(img,canvas.width-100,20,canvas.width/5,canvas.width/5)
}
f(n + 1);
}
img.src = imgsrcArray[n];
} else {
self.downloadUrl = canvas.toDataURL("image/jpeg");
self.downloadUrl = self.downloadUrl.replace("data:image/jpeg;base64,", "");
console.log("更换背景")
if(self.isInitCanvasFabric){
var img = new Image();
img.src = "data:image/jpeg;base64,"+self.downloadUrl;
img.onload = function () {
self.canvasFabric.setBackgroundImage(img.src,self.canvasFabric.renderAll.bind(self.canvasFabric),{
scaleX: self.screenWidth / img.width,
scaleY: self.screenWidth / img.height
});
}
}
}
})(0);
},
cancelPreview(){
console.log("取消")
document.getElementById('previewContainer').style.display = "none"
},
previewImg(){
var dataBase64 = ""
if(this.isInitCanvasFabric){
dataBase64 = this.canvasFabric.toDataURL({width: this.screenWidth, height: this.screenWidth})
}else{
dataBase64 = "data:image/jpeg;base64,"+this.downloadUrl
}
var imgsrcArray = [
dataBase64,
// '../../images/flag.png',
// '../../images/logo.png'
];
this.puzzleAllCanvas(imgsrcArray)
},
puzzleAllCanvas(imgsrcArray){
var self = this;
var canvas = document.getElementById('puzzleAllCanvas');
var ctx = canvas.getContext('2d');
var multiple = 6
canvas.width = document.body.clientWidth*multiple
canvas.height = document.body.clientWidth*multiple;
var imglen = imgsrcArray.length;
var drawimg = (function f(n) {
if (n < imglen) {
var img = new Image();
img.crossOrigin = 'Anonymous'; //解决跨域问题
img.onload = function () {
//ctx.save();
if (n == 0) {
ctx.drawImage(img, 0, 0, canvas.width, canvas.width);
} else if(n==1) {
ctx.drawImage(img,0,multiple*70*self.ratio,multiple*202*self.ratio,multiple*56*self.ratio)
}else{
ctx.drawImage(img,(document.body.clientWidth-40*self.ratio-165*self.ratio)*multiple,(40*self.ratio)*multiple,165*self.ratio*multiple,147*self.ratio*multiple)
}
f(n + 1);
}
img.src = imgsrcArray[n];
} else {
self.allDataUrl = canvas.toDataURL("image/jpeg");
console.log("最终图片",self.allDataUrl)
document.getElementById("previewContainer").style.display = "block"
document.getElementById("allImg").src = self.allDataUrl
}
})(0);
}
}
})
</script>
</body>
</html>
1696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
