18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

品牌营销企业官网建设—头像加相框微信小程序

2021-05-05分享 "> 对不起,没有下一图集了!">

手机上手机微信手机微信微信小程序—头像加相框
今天大伙儿要进行一个给头像加相框功效的手机微信微信小程序。
大约分三个步骤
1.在有相框文件目录的网页页面网页页面递交相片
2.进行裁剪或者旋转功效
这儿选用的头像裁剪手机软件是github/wx-plugin/image-cropper
3.转换成头像存储到本地

上编号!

//选择顾客本身头像相片  upload() {    wx.chooseImage({      count: 1, // 默认设置设定9      sizeType: ['original', 'compressed'], // 可以特殊是原照还是变小图,默认设置设定二者全是有      sourceType: ['album', 'camera'], // 可以特殊来源于因此相册图片照片还是拍照机,默认设置设定二者全是有      success(res) {        const src = res.tempFilePaths[0]        //将选择的图传至cropper页处理        wx.navigateTo({          url: `../cropper/cropper?src=${src}`        })      }    })  }

递交相片获得相片的相对性相对路径传到cropper网页页面网页页面去,cropper就是裁剪网页页面网页页面。
[标识:內容1]
在这里里个文本文档进行裁剪和旋转等方法的编写。
先把image-cropper文本文档放入与cropper同文档文件目录中,接着在cropper中引入。
cropper文本文档
cropper.json文本文档里加上image-cropper

{  "navigationBarTitleText": "裁剪相片",    "navigationBarBackgroundColor": "#000",  "usingComponents": {    "image-cropper": "../image-cropper/image-cropper"  }}

cropper.wxml

 image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut" /image-cropper     view         view bindtap='cancel' 撤消 /view         view catchtouchstart='rotate' catchtouchend='end' data-type="rotate" 旋转 /view         view catchtap='confirm' 确立 /view     /view 

cropper.wxss

page{  background:rgb(14, 13, 13);}.bottom{  position: absolute;  width:100%;  bottom:50rpx;  display: flex;  z-index: 10;  justify-content: space-around;  color:#fff;}

cropper.js

Page({  data: {    src:'',    width: 300,//总宽    height: 300,//高度  },  onLoad: function (options) {    this.cropper = this.selectComponent("#image-cropper");    this.setData({      src: options.src    });  },  cropperload(e) {    console.log('cropper加载开展');  },  loadimage(e){    wx.hideLoading();    this.cropper.imgReset();  },  clickcut(e) {    //相片访问    wx.previewImage({      current: e.detail.url, // 现如今显示信息信息内容相片的http联接      urls: [e.detail.url] // 务必访问的相片http联接文件目录    })  },   rotate() {    //再客户旋转的大部分旋转90°    this.cropper.setAngle(this.cropper.data.angle += 90);  },  end(e) {    clearInterval(this.data[e.currentTarget.dataset.type]);  },  confirm(e){    this.cropper.getImg(function(e){      console.log(e)      let avatar = e.url;        //得到到裁剪后的相片传到存储网页页面网页页面去        wx.redirectTo({          url: `../savePic/savePic?avatar=${avatar}`        })    })  },  //撤消返回上一网页页面网页页面  cancel(){    wx.navigateBack({      url:'../makePic/makePic'    })  }  })

savePic–存储相片文本文档
savePic.wxml

 view wx:if="{{layerShow}}"             view                 view                     text 长按头像存储 /text                 /view             /view         /view     view       view         view           view            canvas canvas-id="myCanvas"        image bindlongtap="generate" src="{{bgsrc}}" /image         image src="{{src}}" /image /canvas               view canvas  canvas-id='ahaucanvas'             /canvas             /view            /view         /view        /view   view bindtap='goMakePic' 再度转换成 /view 

savePic.js

const app = getApp();   Page({  data: {    src: '',    bgsrc: '',    bgcss: '',    layerShow:true,    timer: '',//定时执行实行器名字    countDownNum: '60'//倒数记时初始值  },  goMakePic(){    wx.navigateTo({      url: '/pages/makePic/makePic',    })  },  countdown(){    let that=this;    let countDownNum = that.data.countDownNum;    that.setData({    timer:setInterval(function(){      countDownNum--;      that.setData({        countDownNum: countDownNum,        layerShow:false      })      if(countDownNum==0){        clearInterval(that.data.timer)      }    },2000)    })  },  onLoad(option) {    var that = this;    var bgcss = app.globalData.toubgsrc.substr(14, 2);    //这儿的app.globalData.toubgsrc是一个全局性性变量 在相框文件目录获得被选中的相框    that.setData({      bgsrc: app.globalData.toubgsrc,      bgcss: bgcss    });      let { avatar } = option;    if (avatar) {      that.setData({        src: avatar      });    }  },  onReady(){    this.countdown();  },  //转换成头像  generate() {    var self = this;    var contex = wx.createCanvasContext('ahaucanvas');     var avatarurl_width = 840; //画布宽    var avatarurl_heigth = 840; //画布高    contex.drawImage(self.data.src, 127, 127,600,600);    contex.restore();    contex.save();    contex.beginPath(); //一开始制图    contex.drawImage(self.data.bgsrc, 0, 0, avatarurl_width, avatarurl_heigth);     contex.restore();    contex.draw(true, setTimeout(function () {      wx.canvasToTempFilePath({ //导出来来相片        width: 840,        height: 840,        destWidth: 840,        destHeight: 840,        canvasId: 'ahaucanvas',        success: res = {          wx.saveImageToPhotosAlbum({            filePath: res.tempFilePath,            success: function (data) {              console.log(data);              wx.showToast({                title: '存储获得取得成功',                icon: 'success',                duration: 2000              })            },            fail: function (err) {              if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {                // console.log("顾客拒绝,再一次开展授权")                wx.openSetting({                  success(settingdata) {                    console.log(settingdata)                    if (settingdata.authSetting['scope.writePhotosAlbum']) {                      // console.log('得到管理方法管理权限获得取得成功,得到再一次点一下相片存储到相册图片照片的提示。')                      wx.showToast({                        title: '请再一次存储',                        icon: 'success',                        duration: 2000                      })                    }                   }                })              }            }          })        }      }, this)    }, 100))  },  goMakePic(){    wx.navigateTo({      url: '/pages/makePic/makePic',    })  }})

一块头像加相框的手机微信微信小程序就相近做好了。其实不是很完美,还请大家多多的的赐教O(∩_∩)O


经典著作权声明

即速应用倡导高度重视与维护保养技术专业专业知识产权年限期限。如发现本站文章内容內容存在经典著作权难点,烦请提供经典著作权疑虑、真正真实身份确认、经典著作所有权证实、 ,大伙儿将马上处理。本站文章内容內容仅作共享资源沟通交流沟通交流关键主要用途,写作者看法不一同于即速应用看法。顾客与写作者的一切交易与本站无关紧要,请悉知。


弥勒供电系统系统软件与手机上手机微信手机微信微信小程序促进智能化化交费协议书便签署 弥勒供电系统系统软件局邀请手机上手机微信手机微信微信小程序“融e电”开发设计设计方案商在我国工商局局金融业组织相关工作中中工作中工作人员学员学生就业实干际实际操作流程进行学习培训学习培训 1605581535 2020双十一,手机上手机微信手机微信微信小程序如何杀出重围占据生产制造制造行业盈利? 双十一即将到来,各种各样商家早已在十月中就早就摩拳擦掌了,相对性性能比过去双十一的盛况,今年手机微信微信小程序才华横溢变为电子器件商务接待生产制造制造行业重要的比赛场。根据阿拉丁指数值值报告预测分析剖析大伙儿能够看到,今年双十一手机微信微信小程序的广告宣传宣传策划运营经营规模将呈现爆发式提升,有去年18亿到今年的4六亿,提升做到250%。手机微信微信小程序电子器件商务接待将变为流量争夺的重要方法。 1605581327 在我国邮政于百度搜索检索App公布集寄件、查询非常于一身的著名知名品牌卡功效 一年一度的双11购物快乐按期而至,大伙儿在“抢货”的同时,无可避免导致由于退货货要想寄快递公司企业的规定。便于考虑到顾客在双十一前后左右上下猛增的快递公司企业规定,在我国邮政于百度搜索检索App公布集寄件、查询非常于一身的著名知名品牌卡功效,该功效由百度搜索检索智能化化手机微信微信小程序载重。 1604628430

"> 对不起,没有下一图集了!">
在线咨询