H5头像完整制作，可拖拽缩放，可添加装饰图标（装饰图标支持缩放、旋转、拖拽）

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/750this.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 = thiswindow.onresize = () => {return (() => {window.screenWidth = document.body.clientWidththat.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=falsethis.removePic08()}else{this.isPic08Added = truethis.addPic08()}}else{var img = new Image();img.src = "data:image/jpeg;base64,"+this.downloadUrl;var that = thisimg.onload = function () {that.img2Cvs(img)if(that.isPic08Added){that.isPic08Added=falsethat.removePic08()}else{that.isPic08Added = truethat.addPic08()}}}},removePic08(){if (this.pic08Instance) {this.canvasFabric.remove(this.pic08Instance)}},addPic08(){var that = thisdocument.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=falsethis.removePic07()}else{this.isPic07Added = truethis.addPic07()}}else{var img = new Image();img.src = "data:image/jpeg;base64,"+this.downloadUrl;var that = thisimg.onload = function () {that.img2Cvs(img)if(that.isPic07Added){that.isPic07Added=falsethat.removePic07()}else{that.isPic07Added = truethat.addPic07()}}}},removePic07(){if (this.pic07Instance) {this.canvasFabric.remove(this.pic07Instance)}},addPic07(){var that = thisdocument.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=falsethis.removePic06()}else{this.isPic06Added = truethis.addPic06()}}else{var img = new Image();img.src = "data:image/jpeg;base64,"+this.downloadUrl;var that = thisimg.onload = function () {that.img2Cvs(img)if(that.isPic06Added){that.isPic06Added=falsethat.removePic06()}else{that.isPic06Added = truethat.addPic06()}}}},removePic06(){if (this.pic06Instance) {this.canvasFabric.remove(this.pic06Instance)}},addPic06(){var that = thisdocument.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=falsethis.removePic05()}else{this.isPic05Added = truethis.addPic05()}}else{var img = new Image();img.src = "data:image/jpeg;base64,"+this.downloadUrl;var that = thisimg.onload = function () {that.img2Cvs(img)if(that.isPic05Added){that.isPic05Added=falsethat.removePic05()}else{that.isPic05Added = truethat.addPic05()}}}},removePic05(){if (this.pic05Instance) {this.canvasFabric.remove(this.pic05Instance)}},addPic05(){var that = thisdocument.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=falsethis.removePic04()}else{this.isPic04Added = truethis.addPic04()}}else{var img = new Image();img.src = "data:image/jpeg;base64,"+this.downloadUrl;var that = thisimg.onload = function () {that.img2Cvs(img)if(that.isPic04Added){that.isPic04Added=falsethat.removePic04()}else{that.isPic04Added = truethat.addPic04()}}}},removePic04(){if (this.pic04Instance) {this.canvasFabric.remove(this.pic04Instance)}},addPic04(){var that = thisdocument.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=falsethis.removePic03()}else{this.isPic03Added = truethis.addPic03()}}else{var img = new Image();img.src = "data:image/jpeg;base64,"+this.downloadUrl;var that = thisimg.onload = function () {that.img2Cvs(img)if(that.isPic03Added){that.isPic03Added=falsethat.removePic03()}else{that.isPic03Added = truethat.addPic03()}}}},removePic03(){if (this.pic03Instance) {this.canvasFabric.remove(this.pic03Instance)}},addPic03(){var that = thisdocument.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=falsethis.removePic02()}else{this.isPic02Added = truethis.addPic02()}}else{var img = new Image();img.src = "data:image/jpeg;base64,"+this.downloadUrl;var that = thisimg.onload = function () {that.img2Cvs(img)if(that.isPic02Added){that.isPic02Added=falsethat.removePic02()}else{that.isPic02Added = truethat.addPic02()}}}},removePic02(){if (this.pic02Instance) {this.canvasFabric.remove(this.pic02Instance)}},addPic02(){var that = thisdocument.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=falsethis.removePic01()}else{this.isPic01Added = truethis.addPic01()}}else{var img = new Image();img.src = "data:image/jpeg;base64,"+this.downloadUrl;var that = thisimg.onload = function () {that.img2Cvs(img)if(that.isPic01Added){that.isPic01Added=falsethat.removePic01()}else{that.isPic01Added = truethat.addPic01()}}}},removePic01(){if (this.pic01Instance) {this.canvasFabric.remove(this.pic01Instance)}},addPic01(){var that = thisdocument.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=falsethis.removeGlasses()}else{this.isGlassesAdded = truethis.addGlasses()}}else{var img = new Image();img.src = "data:image/jpeg;base64,"+this.downloadUrl;var that = thisimg.onload = function () {that.img2Cvs(img)if(that.isGlassesAdded){that.isGlassesAdded=falsethat.removeGlasses()}else{that.isGlassesAdded = truethat.addGlasses()}}}},removeGlasses(){if (this.glassesInstance) {this.canvasFabric.remove(this.glassesInstance)}},addGlasses(){var that = thisdocument.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=falsethis.removePower()}else{this.isPowerAdded = truethis.addPower()}}else{var img = new Image();img.src = "data:image/jpeg;base64,"+this.downloadUrl;var that = thisimg.onload = function () {that.img2Cvs(img)if(that.isPowerAdded){that.isPowerAdded=falsethat.removePower()}else{that.isPowerAdded = truethat.addPower()}}}},removePower(){if (this.powerInstance) {this.canvasFabric.remove(this.powerInstance)}},addPower(){var that = thisdocument.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=falsethis.removeHat()}else{this.isHatAdded = truethis.addHat()}}else{var img = new Image();img.src = "data:image/jpeg;base64,"+this.downloadUrl;var that = thisimg.onload = function () {that.img2Cvs(img)if(that.isHatAdded){that.isHatAdded=falsethat.removeHat()}else{that.isHatAdded = truethat.addHat()}}}},removeHat(){if (this.hatInstance) {this.canvasFabric.remove(this.hatInstance)}},addHat(){var that = thisdocument.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=falsethis.removeHand()}else{this.isHandAdded = truethis.addHand()}}else{var img = new Image();img.src = "data:image/jpeg;base64,"+this.downloadUrl;var that = thisimg.onload = function () {that.img2Cvs(img)if(that.isHandAdded){that.isHandAdded=falsethat.removeHand()}else{that.isHandAdded = truethat.addHand()}}}},removeHand(){if (this.handInstance) {this.canvasFabric.remove(this.handInstance)}},addHand(){var that = thisdocument.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 = thisthat.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 = truedocument.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*6canvas.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 = 6canvas.width = document.body.clientWidth*multiplecanvas.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>
H5头像完整制作，可拖拽缩放，可添加装饰图标（装饰图标支持缩放、旋转、拖拽）相关推荐

Hammer.js - 旋转拖拽移动缩放
感觉移动端原生支持的 touch.tap.swipe 几个事件好像还不够用,某些时候还会用到诸如缩放.长按等其他功能. 学习了一个手势库 Hammer.js,它是一个轻量级的触屏设备手势库,能识别出常 ...
H5页面免费制作工具大集合
营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用 ...
H5支付完整demo及问题总结【已解决】
H5支付完整demo及问题总结[已解决] 参考文章: (1)H5支付完整demo及问题总结[已解决] (2)https://www.cnblogs.com/yuanlaishi-lishen/p/10 ...
html5互动场景制作系统,春哥技术博客高仿易企秀H5场景应用制作平台源码V1.0正式版发布...
经过一个月的艰苦努力,春哥团队最新作品即将与大家见面了,<2015年6月春哥技术博客高仿易企秀H5场景应用制作平台源码V1.0正式版>即将来临, 现在春哥接受预定啦,春哥技术博客依然走价格 ...
2022虎年头像框制作小程序源码带背景音乐+流量主功能
☑️ 编号:ym250 ☑️ 品牌:无 ☑️ 语言:wx小程序 ☑️ 大小:1.6MB ☑️ 类型:虎年头像框制作 ☑️ 支持:小程序
氛围感新年头像如何制作？教你简单的制作好看头像的办法
氛围感新年头像如何制作?转眼间又快到了过年时节,每年过年的时候大家都需要辞旧迎新.家家户户都需要打扫屋子,更换被褥,购买新衣.而作为冲浪达人,我们当然也要把我们的社交账号的头像更新一下啦.这里小编就来 ...
2023兔年头像框制作生成小程序源码+多模板/抓住红利
正文: 2023了,到了兔年那么也该换新的头像框拉,今天给大家带来兔年的头像框制作小程序,支持一键获取头像支持用户上传头像,丰富的模板,不只于兔年头像框还有其它的,早点给大家发出来也好让大家早点抓住这 ...
在微信朋友圈常见的H5要如何制作？
在微信朋友圈常见的H5要如何制作? 关于调查问卷的制作用H5可以吗? H5可以作为哪些场景使用?要怎么做? H5用途教学在这里,欢迎学习观看微信H5链接自学制作教学什么是H5链接?H5链接该怎么做 ...
微信h5图表组件制作教程
H5图表可以很好的展现信息,体现信息的多样性,是表单的升级版.在后台可以导出汇总后的表单信息,省却了人工制表统计的时间,高效而快捷;对用户来说,简单的输入和选择即可完成问卷,一键提交省事而便利.今天就 ...