* [html5] support image.save method.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/2d62abd0 Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/2d62abd0 Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/2d62abd0 Branch: refs/heads/0.16-dev Commit: 2d62abd0789078b9dc2f75eb5cccdeb5ee63b6f5 Parents: c45b53c Author: MrRaindrop <tekk...@gmail.com> Authored: Fri Aug 4 16:40:07 2017 +0800 Committer: MrRaindrop <tekk...@gmail.com> Committed: Fri Aug 4 16:40:07 2017 +0800 ---------------------------------------------------------------------- html5/render/vue/components/image.js | 58 ++++++++++++++++++++++++++++--- 1 file changed, 53 insertions(+), 5 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/2d62abd0/html5/render/vue/components/image.js ---------------------------------------------------------------------- diff --git a/html5/render/vue/components/image.js b/html5/render/vue/components/image.js index d1fe664..754725b 100644 --- a/html5/render/vue/components/image.js +++ b/html5/render/vue/components/image.js @@ -19,6 +19,8 @@ let extractComponentStyle, createEventMap, extend +const IMG_NAME_BITS = 15 + const _css = ` .weex-image, .weex-img { background-repeat: no-repeat; @@ -52,6 +54,51 @@ function preProcessSrc (context, url, mergedStyle) { }) || url } +function download (url, callback) { + function success () { + callback && callback({ + success: true + }) + } + function fail (err) { + callback && callback({ + success: false, + errorDesc: err + '' + }) + } + try { + let isDataUrl = false + let parts + let name + if (url.match(/data:image\/[^;]+;base64,/)) { + isDataUrl = true + parts = url.split(',') + } + if (!isDataUrl) { + name = url + .replace(/\?[^?]+/, '') + .replace(/#[^#]+/, '') + .match(/([^/]+)$/) + } + else { + name = parts[1].substr(0, IMG_NAME_BITS) + } + const aEl = document.createElement('a') + aEl.href = url + /** + * Not all browser support this 'download' attribute. In these browsers it'll jump + * to the photo url page and user have to longpress the photo to save it. + */ + aEl.download = name + const clickEvt = new Event('click', { bubbles: false }) + aEl.dispatchEvent(clickEvt) + success() + } + catch (err) { + fail(err) + } +} + const image = { name: 'weex-image', props: { @@ -71,12 +118,13 @@ const image = { this._fireLazyload() }, + methods: { + save (callback) { + download(this.src, callback) + } + }, + render (createElement) { - /* istanbul ignore next */ - // if (process.env.NODE_ENV === 'development') { - // validateStyles('image', this.$vnode.data && this.$vnode.data.staticStyle) - // } - // const style = this._normalizeInlineStyles(this.$vnode.data) const resizeStyle = getResizeStyle(this) const style = extractComponentStyle(this) return createElement('figure', {
