联系人添加头像流程

新增联系人,点击添加头像按钮,contacts/js/views/form.js中

    thumb = dom.querySelector('#thumbnail-photo');
    thumb.onclick = pickImage;

在pickImage中

var pickImage = function pickImage() {
    var activity = new MozActivity({
      name: 'pick',
      data: {
        type: 'image/jpeg'
      }
    });

    activity.onsuccess = function success() {
      addRemoveIconToPhoto();
      if (!emptyForm())
        saveButton.removeAttribute('disabled');
      // XXX
      // this.result.blob is valid now, but it won't stay valid
      // (see https://bugzilla.mozilla.org/show_bug.cgi?id=806503)
      // And it might not be the size we want, anyway, so we make
      // our own copy that is at the right size.
      resizeBlob(this.result.blob, PHOTO_WIDTH, PHOTO_HEIGHT,
                 function(resized) {
                   Contacts.updatePhoto(resized, thumb);
                   currentPhoto = resized;
                 });
    };

    activity.onerror = function() {
      window.console.error('Error in the activity', activity.error);
    };

    return false;
  };

gallery中的manifest.webapp中有

    "pick": {
      "filters": {
        "type": ["image/*", "image/jpeg", "image/png"]
       },
      "disposition": "inline",
      "returnValue": true,
      "href": "/index.html#pick"
    },

gallery/js/gallery.js中注册的处理函数:

  navigator.mozSetMessageHandler('activity', function activityHandler(a) {
    var activityName = a.source.name;
    switch (activityName) {
    ...
    case 'pick':
      if (pendingPick) // I don't think this can really happen anymore
        cancelPick();
      pendingPick = a; // We need pendingPick set before calling initDB()
      if (!photodb)
        initDB();
      startPick();
      break;
    }
  });

startPick中,加载js,设置iew为pickView

function startPick() {
  pickType = pendingPick.source.data.type;

  if (pendingPick.source.data.width && pendingPick.source.data.height) {
    pickWidth = pendingPick.source.data.width;
    pickHeight = pendingPick.source.data.height;
  }
  else {
    pickWidth = pickHeight = 0;
  }
  // We need frame_scripts and ImageEditor for cropping the photo
  loader.load(['js/frame_scripts.js', 'js/ImageEditor.js'], function() {
    setView(pickView);
  });
}

点击图库中一张图片之后

 ...
// Handle clicks on the thumbnails we're about to create
  thumbnails.addEventListener('click', thumbnailClickHandler);
...

function thumbnailClickHandler(evt) {
  var target = evt.target;
  if (!target || !target.classList.contains('thumbnail'))
    return;

  ...
  else if (currentView === pickView) {
    var index = getFileIndex(target.dataset.filename);
    if (index >= 0) {
      cropPickedImage(files[index]);
    }
  }
}

在crop界面点击done按钮

...
$('crop-done-button').onclick = cropAndEndPick;
...
function cropAndEndPick() {
  if (Array.isArray(pickType)) {
    if (pickType.length === 0 ||
        pickType.indexOf(pickedFile.type) !== -1 ||
        pickType.indexOf('image/*') !== -1) {
      pickType = pickedFile.type;
    }
    else if (pickType.indexOf('image/png') !== -1) {
      pickType = 'image/png';
    }
    else {
      pickType = 'image/jpeg';
    }
  }
  else if (pickType === 'image/*') {
    pickType = pickedFile.type;
  }

  // If we're not changing the file type or resizing the image and if
  // we're not cropping, or if the user did not crop, then we can just
  // use the file as it is.
  if (pickType === pickedFile.type &&
      !pickWidth && !pickHeight &&
      (pendingPick.source.data.nocrop || !cropEditor.hasBeenCropped())) {
    photodb.getFile(pickedFile.name, endPick);
  }
  else {
    cropEditor.getCroppedRegionBlob(pickType, pickWidth, pickHeight, endPick);
  }
}
在上面的函数中,完成之后最终会调endPick函数,该函数中会postResult回传结果。
function endPick(blob) {
  pendingPick.postResult({
    type: pickType,
    blob: blob
  });
  cleanupPick();
}
cancelPick中会postError
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值