新增联系人,点击添加头像按钮,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