123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296 |
- // customized/pages/made/combination/combination.js
- import * as util from '../../../../utils/util.js'
- Page({
- /**
- * 页面的初始数据
- */
- data: {
- dataPositionObj: { //正面数据
- top: 156,
- left: 286,
- width: 270,
- height: 270
- },
- imgTouch: {
- isActive: "1",
- src: "https://dlz.info666.com//temp/d945bfb0-5cc6-406d-a814-cf63b099041f.jpg",
- x: -82,
- y: 17,
- clientX: 195,
- clientY: 121,
- width: 517,
- height: 208.17866666666666,
- scale: 2.4834437086092715,
- angle: 27
- },
- fontTouch: {
- isActive: "1",
- fontContent: "Gg",
- isColor: "#ffffff",
- x: 10,
- y: 10,
- angle: 0,
- fontSize: 100,
- clientX: 0,
- clientY: 0,
- width: 138.34375,
- height: 132
- },
- rpx: 1,
- obverseImgObject:['', '/customized/images/customized/cup_black_big.png', '/customized/images/customized/cup_black_side.png', '/customized/images/customized/cup_black_handle.png', '/customized/images/customized/cup_black_bottom.png'],
- // obverseImgObject: {
- // '1': ,
- // /*正面 */
- // '2': '/customized/images/customized/cup_black_side.png',
- // /*侧面面 */
- // '3': '/customized/images/customized/cup_black_handle.png',
- // /*手柄 */
- // '4': '/customized/images/customized/cup_black_bottom.png',
- // /*底部 */
- // },
- imgSrcArray: [],
- buildSrcArray: [],
- },
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad: function (options) {
-
- // if (wx.getStorageSync('madeCupImgData1')) {
- // this.setData({
- // imgTouch: wx.getStorageSync('madeCupImgData1')
- // })
- // }
- // if (wx.getStorageSync('madeCupFontData1')) {
- // this.setData({
- // fontTouch: wx.getStorageSync('madeCupFontData1')
- // })
- // }
- },
- /**
- * 生命周期函数--监听页面初次渲染完成
- */
- onReady: function () {
- },
- /**
- * 生命周期函数--监听页面显示
- */
- onShow: function () {
- // this.getCombImg(this);
- wx.showLoading({
- title: '图片合成中...'
- })
- let that = this;
- // for (let i = 1; i <= 4; i++) {
- // if (wx.getStorageSync('madeCupImgData' + i) || wx.getStorageSync('madeCupFontData' + i)) {
- // console.log(i, "iiiii")
- // that.getCombImg(that, i);
- // }
- // }
- if (wx.getStorageSync('madeCupImgData1') || wx.getStorageSync('madeCupFontData1')) {
- that.getCombImg(that, 1);
- } else if(wx.getStorageSync('madeCupImgData2') || wx.getStorageSync('madeCupFontData2')) {
- that.getCombImg(that, 2);
- } else if (wx.getStorageSync('madeCupImgData3') || wx.getStorageSync('madeCupFontData3')) {
- that.getCombImg(that, 3);
- } else if (wx.getStorageSync('madeCupImgData4') || wx.getStorageSync('madeCupFontData4')) {
- that.getCombImg(that, 4);
- }
- },
- /**
- * 生命周期函数--监听页面隐藏
- */
- onHide: function () {
- },
- /**
- * 生命周期函数--监听页面卸载
- */
- onUnload: function () {
- },
- /**
- * 页面相关事件处理函数--监听用户下拉动作
- */
- onPullDownRefresh: function () {
- },
- /**
- * 页面上拉触底事件的处理函数
- */
- onReachBottom: function () {
- },
- /**
- * 用户点击右上角分享
- */
- onShareAppMessage: function () {
- },
- getCombImg(that,i) {
- let imgTouch = null, dataPositionObj=null;
- that.setData({ // imgSrcArray 初始化
- imgSrcArray:[],
- })
- console.log(wx.getStorageSync('madeCupImgData' + i),"wx.getStorageSync('madeCupImgData' + i)")
- if(wx.getStorageSync('madeCupImgData' + i)){
- imgTouch = wx.getStorageSync('madeCupImgData'+i);
- dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
- console.log(dataPositionObj,"dataPositionObj")
- wx.getSystemInfo({
- success: function (res) {
- let rpx = res.windowWidth / 750;
- that.setData({
- rpx: rpx
- });
- wx.downloadFile({
- url: imgTouch.src, // 仅为示例,并非真实的资源
- success(res) {
- // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
- console.log(res)
- if (res.statusCode === 200) {
- // canvas截图区域与图片的宽度比例
- let dWidth = dataPositionObj.width / imgTouch.width;
- // canvas截图区域与图片的高度比例
- let dHeight = dataPositionObj.height / imgTouch.height;
- const ctx = wx.createCanvasContext('comb-img'+i);
- //画布中点坐标转移到图片中心
- let movex = imgTouch.x + imgTouch.width * rpx / 2;
- let movey = imgTouch.y + imgTouch.height * rpx / 2;
- ctx.translate(movex, movey);
- ctx.rotate(imgTouch.angle * Math.PI / 180);
- ctx.drawImage(res.tempFilePath, -imgTouch.width * rpx / 2, -imgTouch.height * rpx / 2, imgTouch.width * rpx, imgTouch.height * rpx)
- ctx.draw(false,function () {
- wx.canvasToTempFilePath({
- canvasId: 'comb-img'+i,
- success: function (res) {
- console.log(res)
- let imgArray = that.data.imgSrcArray;
- imgArray.push(res.tempFilePath)
- that.setData({
- imgSrcArray: imgArray
- })
- that.getCombFont(that,i,true);
- }
- }, that)
- })
- }
- }
- })
- },
- })
- } else {
- that.getCombFont(that,i,false);
- }
-
-
-
- },
- getCombFont(that,i,_static) {
- let fontTouch = null,dataPositionObj = null;
- if (wx.getStorageSync('madeCupFontData' + i)) {
- fontTouch = wx.getStorageSync('madeCupFontData' + i);
- dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
- const ctx = wx.createCanvasContext('comb-font'+i);
- ctx.setFontSize(fontTouch.fontSize);
- ctx.setFillStyle(fontTouch.isColor);
- // ctx.translate(0, fontTouch.height / 5 * 4);
- // ctx.save();
- let movex = fontTouch.width / 2;
- let movey = fontTouch.height / 2;
- ctx.translate(movex, movey);
- ctx.rotate(fontTouch.angle * Math.PI / 180);
- ctx.translate(-movex, -movey);
- // ctx.rotate(fontTouch.angle * Math.PI / 180);
- // ctx.fillText(fontTouch.fontContent, 0, 0);
- // ctx.translate(fontTouch.x, fontTouch.y + fontTouch.height / 5 * 4);
- ctx.fillText(fontTouch.fontContent, fontTouch.x, fontTouch.y +fontTouch.height / 5 * 4);
- ctx.draw(false,function () {
- wx.canvasToTempFilePath({
- canvasId: 'comb-font'+i,
- success: function (res) {
- console.log(res)
- let imgArray = that.data.imgSrcArray;
- imgArray.push(res.tempFilePath)
- that.setData({
- imgSrcArray: imgArray
- })
- console.log(that.data.imgSrcArray, "that.data.imgSrcArray")
- that.getComb(that, that.data.imgSrcArray,i,true)
- }
- }, that)
- })
- } else {
- that.getComb(that, that.data.imgSrcArray, i, _static)
- }
-
- },
- getComb(that, imgSrcArray,i,_static) {
- if(_static){
- let imgTouch = wx.getStorageSync('madeCupImgData' + i);
- let dataPositionObj = util.changeCup(i.toString()).dataPositionObj;
- let canvasBg = that.data.obverseImgObject[i];
- console.log(canvasBg)
- wx.getSystemInfo({
- success: function (res) {
- let rpx = res.windowWidth / 750;
- that.setData({
- rpx: rpx
- });
- const ctx = wx.createCanvasContext('comb-canvas' + i);
- ctx.drawImage(canvasBg, 0, 0, 750 * rpx, 588 * rpx);
- // 设置背景
- ctx.draw(true)
- imgSrcArray.forEach((res) => {
- ctx.drawImage(res, dataPositionObj.left * rpx, dataPositionObj.top * rpx, dataPositionObj.width * rpx, dataPositionObj.height * rpx);
- })
- wx.hideLoading();
- ctx.draw(true, function () {
- wx.canvasToTempFilePath({
- canvasId: 'comb-canvas' + i,
- success: function (res) {
- console.log(res, "合成成功");
- let buildSrcArray = that.data.buildSrcArray;
- buildSrcArray.push(res.tempFilePath);
- console.log(buildSrcArray, "buildSrcArray")
- that.setData({
- buildSrcArray: buildSrcArray
- })
- console.log(that.data.buildSrcArray, "buildSrcArray")
- if (i < 4) {
- i = i + 1
- that.getCombImg(that, i);
- } else {
- wx.hideLoading()
- }
- },
- fail: function (err) {
- console.log(err, "合成失败")
- wx.hideLoading();
- }
- }, that)
- })
- },
- })
- } else {
- wx.hideLoading()
- }
-
- }
- })
|