公司建设网站手机app—微信小程序图片裁剪

2021-03-26 20:37| 发布者: | 查看: |

手机软件完全免费免费下载网站github/dlhandsome/we-cropper

在wxml网页页面网页页面再加

!--start 顾客自动式获取正正正方形照片  --
template name="we-cropper"
    canvas
           
            disable-scroll="true"
            bindtouchstart="touchStart"
            bindtouchmove="touchMove"
            bindtouchend="touchEnd"
           
            canvas-id="{{id}}"
    /canvas
/template


view
    template is="we-cropper"  data="{{...cropperOpt}}"/
      view
          view bindtap="chooseimage" 再度选择 /view
          view  bindtap="getCropperImage" 确立 /view
      /view
/view

!--end 顾客自动式获取正正正方形照片  --

相符合的js中放上

import WeCropper from '../../utils/we-cropper/we-cropper.js'
const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 100;

Page({

  data: {    

cropperOpt: {

      id: 'cropper',
      width,
      height,
      scale: 2.5,
      zoom: 8,
      cut: {
        x: (width - 300) / 2,
        y: (height - 300) / 2,
        width: 300,
        height: 300
      }
    }

  },

onLoad: function () {
    this.getdata();
    const { cropperOpt } = this.data
    new WeCropper(cropperOpt)
      .on('ready', (ctx) = {
        console.log(`wecropper is ready for work!`)
      })
      .on('beforeImageLoad', (ctx) = {
        console.log(`before picture loaded, i can do something`)
        console.log(`current canvas context:`, ctx)
        wx.showToast({
          title: '递交中',
          icon: 'loading',
          duration: 20000
        })
      })
      .on('imageLoad', (ctx) = {
        console.log(`picture loaded`)
        console.log(`current canvas context:`, ctx)
        wx.hideToast()
      })
      .on('beforeDraw', (ctx, instance) = {
        console.log(`before canvas draw,i can do something`)
        console.log(`current canvas context:`, ctx)
      })
      .updateCanvas();
  },
  touchStart(e) {
    this.wecropper.touchStart(e)
  },
  touchMove(e) {
    this.wecropper.touchMove(e)
  },
  touchEnd(e) {
    this.wecropper.touchEnd(e)

  },

 chooseimage: function () {

    var that = this;

    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      success: function (res) {
        that.setData({
          cutImage: 'show',
          addtribeConShow: 'hide'
        });
        that.wecropper.pushOrign(res.tempFilePaths[0]); 
      }

    })

},

getCropperImage() {
    var that = this;
    that.wecropper.getCropperImage((src) = {

      if (src) {

        //这儿再加顾客确立裁剪后推行的具体实际操作 src是获取到的相片相对性相对路径

    }

        }

}


具体实际效果下列图:



经典著作权声明

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


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

<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部