we-plugin / we-cropper

微信小程序图片裁剪工具
https://we-plugin.github.io/we-cropper/#/
MIT License
2.18k stars 451 forks source link

使用 getCropperImage 后, canvas 中的图片放大了一倍 #14

Closed weisiwu closed 5 years ago

weisiwu commented 7 years ago

代码如下:

import weCropper from '../../we-cropper/dist/weCropper.js';
var app = getApp();
const device = wx.getSystemInfoSync() // 获取设备信息
const width = 350;
const height = 300;
Page({
  data: {
      "choseImg": "choseImageBtn.png",
      "chosenImg": "",
      "indexBk": "index-bk.png",
      wecropper: null,
      cropperOpt: {
        id: 'cropper',
        width,
        height,
        scale: 2.5,
        zoom: 8,
        cut: {
          x: 0,
          y: 0,
          width: 350,
          height: 300
        }
      }
  },
  onLoad: function() {
    var that = this;
    // 页面加载时初始化画布
    const { data } = this
    // 若同一个页面只有一个裁剪容器,在其它Page方法中可通过this.wecropper访问实例
    var wecropper = new weCropper(that)
      .on('ready', (ctx) => {
      })
      .on('beforeImageLoad', (ctx) => {
        wx.showToast({
          title: '上传中',
          icon: 'loading',
          duration: 20000
        })
      })
      .on('imageLoad', (ctx) => {
        wx.hideToast()
      });
    // 加载页面请求用户数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        "userInfo": userInfo,
        "wecropper": wecropper,
        "date": ((new Date).getDate() + "." + ((new Date).getMonth() + 1) + "." + (new Date).getFullYear())
      });
    });
  },
  // 选择图片函数
  choseImg: function(evt) {
    var that = this;
    console.log("点击按钮!");
    // 选择完毕后,显示等待提示
    wx.chooseImage({
      count: 1,
      success: function(res) {
        var tempFilePaths = res.tempFilePaths;
        wx.showLoading({
          title: "加工中",
          complete: function() {
            setTimeout(function() {wx.hideLoading()}, 500);
          }
        });
        that.setData({
          "chosenImg": tempFilePaths,
          "showBtnLine": "block",
          "showChose": "none"
        });
      },
      fail: function(errInfo) {
        wx.showLoading({
          title: "加工失败",
          complete: function() {
            setTimeout(function() {wx.hideLoading()}, 1000);
          }
        });
      }
    });
  },
  // 剪切图片
  modifyImg: function() {
    var that = this,
      src = that.data.chosenImg[0];
    this.wecropper.pushOrign(src);
    this.wecropper.getCropperImage((src) => {
      that.setData({
        "chosenImg": src
      });
    });
    // 保存图片到服务器
    //that.saveImg();
  }
});
weisiwu commented 7 years ago

@dlhandsome 想请教您一下,十分感谢。

dlhandsome commented 7 years ago

这个地方是有点问题,当初是想通过改变输出尺寸来解决清晰度问题,但貌似这个思路是错的

sunshine824 commented 6 years ago

有解决办法吗

dlhandsome commented 5 years ago

2019年,这个问题终于要解决了。。 https://github.com/we-plugin/we-cropper/pull/88