├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── LICENSE ├── README.md ├── README_npm.md ├── build ├── build.js ├── check-versions.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── dist ├── fonts │ ├── iconfont.400930b.ttf │ └── iconfont.d46bcc2.eot ├── img │ └── iconfont.4327f2c.svg ├── vue-image-transform.min.css └── vue-image-transform.min.js ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.vue ├── components │ ├── ImageTransform │ │ ├── ImageTransform.vue │ │ ├── PerspectiveTransform.min.js │ │ ├── canvasUtil.min.js │ │ └── index.js │ └── index.js ├── examples │ ├── image-model.vue │ └── index.vue ├── main.js └── router │ └── index.js └── static ├── .gitkeep ├── font_demo ├── demo.css ├── demo_fontclass.html ├── demo_symbol.html ├── demo_unicode.html ├── iconfont.css ├── iconfont.eot ├── iconfont.js ├── iconfont.svg ├── iconfont.ttf └── iconfont.woff └── image ├── sofa.png └── sticker1.png /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 13 | extends: 'standard', 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'html' 17 | ], 18 | // add your custom rules here 19 | 'rules': { 20 | // allow paren-less arrow functions 21 | 'arrow-parens': 0, 22 | // allow async-await 23 | 'generator-star-spacing': 0, 24 | // allow debugger during development 25 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 26 | 'semi': ['error', 'always'], 27 | 'no-unused-vars': 0, 28 | 'one-var': 0 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, and 10 | distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by the copyright 13 | owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all other entities 16 | that control, are controlled by, or are under common control with that entity. 17 | For the purposes of this definition, "control" means (i) the power, direct or 18 | indirect, to cause the direction or management of such entity, whether by 19 | contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the 20 | outstanding shares, or (iii) beneficial ownership of such entity. 21 | 22 | "You" (or "Your") shall mean an individual or Legal Entity exercising 23 | permissions granted by this License. 24 | 25 | "Source" form shall mean the preferred form for making modifications, including 26 | but not limited to software source code, documentation source, and configuration 27 | files. 28 | 29 | "Object" form shall mean any form resulting from mechanical transformation or 30 | translation of a Source form, including but not limited to compiled object code, 31 | generated documentation, and conversions to other media types. 32 | 33 | "Work" shall mean the work of authorship, whether in Source or Object form, made 34 | available under the License, as indicated by a copyright notice that is included 35 | in or attached to the work (an example is provided in the Appendix below). 36 | 37 | "Derivative Works" shall mean any work, whether in Source or Object form, that 38 | is based on (or derived from) the Work and for which the editorial revisions, 39 | annotations, elaborations, or other modifications represent, as a whole, an 40 | original work of authorship. For the purposes of this License, Derivative Works 41 | shall not include works that remain separable from, or merely link (or bind by 42 | name) to the interfaces of, the Work and Derivative Works thereof. 43 | 44 | "Contribution" shall mean any work of authorship, including the original version 45 | of the Work and any modifications or additions to that Work or Derivative Works 46 | thereof, that is intentionally submitted to Licensor for inclusion in the Work 47 | by the copyright owner or by an individual or Legal Entity authorized to submit 48 | on behalf of the copyright owner. For the purposes of this definition, 49 | "submitted" means any form of electronic, verbal, or written communication sent 50 | to the Licensor or its representatives, including but not limited to 51 | communication on electronic mailing lists, source code control systems, and 52 | issue tracking systems that are managed by, or on behalf of, the Licensor for 53 | the purpose of discussing and improving the Work, but excluding communication 54 | that is conspicuously marked or otherwise designated in writing by the copyright 55 | owner as "Not a Contribution." 56 | 57 | "Contributor" shall mean Licensor and any individual or Legal Entity on behalf 58 | of whom a Contribution has been received by Licensor and subsequently 59 | incorporated within the Work. 60 | 61 | 2. Grant of Copyright License. 62 | 63 | Subject to the terms and conditions of this License, each Contributor hereby 64 | grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, 65 | irrevocable copyright license to reproduce, prepare Derivative Works of, 66 | publicly display, publicly perform, sublicense, and distribute the Work and such 67 | Derivative Works in Source or Object form. 68 | 69 | 3. Grant of Patent License. 70 | 71 | Subject to the terms and conditions of this License, each Contributor hereby 72 | grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, 73 | irrevocable (except as stated in this section) patent license to make, have 74 | made, use, offer to sell, sell, import, and otherwise transfer the Work, where 75 | such license applies only to those patent claims licensable by such Contributor 76 | that are necessarily infringed by their Contribution(s) alone or by combination 77 | of their Contribution(s) with the Work to which such Contribution(s) was 78 | submitted. If You institute patent litigation against any entity (including a 79 | cross-claim or counterclaim in a lawsuit) alleging that the Work or a 80 | Contribution incorporated within the Work constitutes direct or contributory 81 | patent infringement, then any patent licenses granted to You under this License 82 | for that Work shall terminate as of the date such litigation is filed. 83 | 84 | 4. Redistribution. 85 | 86 | You may reproduce and distribute copies of the Work or Derivative Works thereof 87 | in any medium, with or without modifications, and in Source or Object form, 88 | provided that You meet the following conditions: 89 | 90 | You must give any other recipients of the Work or Derivative Works a copy of 91 | this License; and 92 | You must cause any modified files to carry prominent notices stating that You 93 | changed the files; and 94 | You must retain, in the Source form of any Derivative Works that You distribute, 95 | all copyright, patent, trademark, and attribution notices from the Source form 96 | of the Work, excluding those notices that do not pertain to any part of the 97 | Derivative Works; and 98 | If the Work includes a "NOTICE" text file as part of its distribution, then any 99 | Derivative Works that You distribute must include a readable copy of the 100 | attribution notices contained within such NOTICE file, excluding those notices 101 | that do not pertain to any part of the Derivative Works, in at least one of the 102 | following places: within a NOTICE text file distributed as part of the 103 | Derivative Works; within the Source form or documentation, if provided along 104 | with the Derivative Works; or, within a display generated by the Derivative 105 | Works, if and wherever such third-party notices normally appear. The contents of 106 | the NOTICE file are for informational purposes only and do not modify the 107 | License. You may add Your own attribution notices within Derivative Works that 108 | You distribute, alongside or as an addendum to the NOTICE text from the Work, 109 | provided that such additional attribution notices cannot be construed as 110 | modifying the License. 111 | You may add Your own copyright statement to Your modifications and may provide 112 | additional or different license terms and conditions for use, reproduction, or 113 | distribution of Your modifications, or for any such Derivative Works as a whole, 114 | provided Your use, reproduction, and distribution of the Work otherwise complies 115 | with the conditions stated in this License. 116 | 117 | 5. Submission of Contributions. 118 | 119 | Unless You explicitly state otherwise, any Contribution intentionally submitted 120 | for inclusion in the Work by You to the Licensor shall be under the terms and 121 | conditions of this License, without any additional terms or conditions. 122 | Notwithstanding the above, nothing herein shall supersede or modify the terms of 123 | any separate license agreement you may have executed with Licensor regarding 124 | such Contributions. 125 | 126 | 6. Trademarks. 127 | 128 | This License does not grant permission to use the trade names, trademarks, 129 | service marks, or product names of the Licensor, except as required for 130 | reasonable and customary use in describing the origin of the Work and 131 | reproducing the content of the NOTICE file. 132 | 133 | 7. Disclaimer of Warranty. 134 | 135 | Unless required by applicable law or agreed to in writing, Licensor provides the 136 | Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, 137 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, 138 | including, without limitation, any warranties or conditions of TITLE, 139 | NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are 140 | solely responsible for determining the appropriateness of using or 141 | redistributing the Work and assume any risks associated with Your exercise of 142 | permissions under this License. 143 | 144 | 8. Limitation of Liability. 145 | 146 | In no event and under no legal theory, whether in tort (including negligence), 147 | contract, or otherwise, unless required by applicable law (such as deliberate 148 | and grossly negligent acts) or agreed to in writing, shall any Contributor be 149 | liable to You for damages, including any direct, indirect, special, incidental, 150 | or consequential damages of any character arising as a result of this License or 151 | out of the use or inability to use the Work (including but not limited to 152 | damages for loss of goodwill, work stoppage, computer failure or malfunction, or 153 | any and all other commercial damages or losses), even if such Contributor has 154 | been advised of the possibility of such damages. 155 | 156 | 9. Accepting Warranty or Additional Liability. 157 | 158 | While redistributing the Work or Derivative Works thereof, You may choose to 159 | offer, and charge a fee for, acceptance of support, warranty, indemnity, or 160 | other liability obligations and/or rights consistent with this License. However, 161 | in accepting such obligations, You may act only on Your own behalf and on Your 162 | sole responsibility, not on behalf of any other Contributor, and only if You 163 | agree to indemnify, defend, and hold each Contributor harmless for any liability 164 | incurred by, or claims asserted against, such Contributor by reason of your 165 | accepting any such warranty or additional liability. 166 | 167 | END OF TERMS AND CONDITIONS 168 | 169 | APPENDIX: How to apply the Apache License to your work 170 | 171 | To apply the Apache License to your work, attach the following boilerplate 172 | notice, with the fields enclosed by brackets "{}" replaced with your own 173 | identifying information. (Don't include the brackets!) The text should be 174 | enclosed in the appropriate comment syntax for the file format. We also 175 | recommend that a file or class name and description of purpose be included on 176 | the same "printed page" as the copyright notice for easier identification within 177 | third-party archives. 178 | 179 | Copyright 2018 purestart 180 | 181 | Licensed under the Apache License, Version 2.0 (the "License"); 182 | you may not use this file except in compliance with the License. 183 | You may obtain a copy of the License at 184 | 185 | http://www.apache.org/licenses/LICENSE-2.0 186 | 187 | Unless required by applicable law or agreed to in writing, software 188 | distributed under the License is distributed on an "AS IS" BASIS, 189 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 190 | See the License for the specific language governing permissions and 191 | limitations under the License. 192 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-image-transform 2 | 3 | #### 项目介绍 4 | 5 | image transform 图片变形编辑组件，拖拽变形，并导出新的图片,兼容移动端和 PC 端 6 | 7 | ![image](https://gitee.com/_pure/codes/dn4u2bw65zxemfklcao9i45/raw?blob_name=github-vue-image-transform-v1.gif) 8 | 9 | #### 软件架构 10 | 11 | 兼容移动端和 PC 端 12 | 13 | #### 依赖 14 | 15 | 目前依赖 jquery,需要在 index.html 引入 jq 16 | 17 | > 18 | 19 | #### 安装教程 20 | 21 | npm install vue-image-transform --save 22 | 23 | #### 使用说明 24 | 25 | 在main.js中 26 | import 'vue-image-transform/dist/vue-image-transform.min.css'; 27 | import { ImageTranform } from 'vue-image-transform'; 28 | Vue.use(ImageTranform); 29 | 30 | 页面中使用 31 | 36 | 37 | 38 | ## Usage 39 | 40 | #### Props 41 | 42 | | Name | Type | Default | Description | 43 | | --------- | ------ | ------- | ---------------- | 44 | | width | Number | 0 | 编辑画布宽度 | 45 | | height | Number | 0 | 编辑画布高度 | 46 | | imgSrc | String | 0 | 图片 Url | 47 | | maxImageW | Number | 0 | 编辑图片最大宽度 | 48 | | maxImageH | Number | 0 | 编辑图片最大高度 | 49 | 50 | ## Function 51 | 52 | > 方法调用 53 | > this.\$refs.imageTran.方法名(params) 54 | 55 | #### toDataUrl(cb) 绘制图片 56 | 57 | | params | Type | Description | 58 | | ------ | -------- | --------------------------- | 59 | | cb | Function | 生成图片回调 cb(base64)=>{} | 60 | 61 | #### 参与贡献 62 | 63 | 1. Fork 本项目 64 | 2. 新建 Feat_xxx 分支 65 | 3. 提交代码 66 | 4. 新建 Pull Request 67 | -------------------------------------------------------------------------------- /README_npm.md: -------------------------------------------------------------------------------- 1 | # auto-preview-image 2 | HengTuo auto-preview-image. 3 | 4 | ## Installation 5 | ``` 6 | npm install auto-preview-image --save 7 | ``` 8 | 9 | ## Import 10 | ``` 11 | 在main.js中 12 | import 'auto-preview-image/dist/auto-preview-image.min.css'; 13 | import { ApImage } from 'auto-preview-image'; 14 | ``` 15 | ``` 16 | Vue.use(ApImage); 17 | ``` 18 | 19 | 使用 20 | 21 | ``` 22 | 23 | ``` 24 | 25 | ## Changelog 26 | ### 2018.8.26 27 | > v0.1.4 * 初始化组件库 28 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader' 51 | }) 52 | } else { 53 | return ['vue-style-loader'].concat(loaders) 54 | } 55 | } 56 | 57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 58 | return { 59 | css: generateLoaders(), 60 | postcss: generateLoaders(), 61 | less: generateLoaders('less'), 62 | sass: generateLoaders('sass', { indentedSyntax: true }), 63 | scss: generateLoaders('sass'), 64 | stylus: generateLoaders('stylus'), 65 | styl: generateLoaders('stylus') 66 | } 67 | } 68 | 69 | // Generate loaders for standalone style files (outside of .vue) 70 | exports.styleLoaders = function (options) { 71 | const output = [] 72 | const loaders = exports.cssLoaders(options) 73 | 74 | for (const extension in loaders) { 75 | const loader = loaders[extension] 76 | output.push({ 77 | test: new RegExp('\\.' + extension + '$'), 78 | use: loader 79 | }) 80 | } 81 | 82 | return output 83 | } 84 | 85 | exports.createNotifierCallback = () => { 86 | const notifier = require('node-notifier') 87 | 88 | return (severity, errors) => { 89 | if (severity !== 'error') return 90 | 91 | const error = errors[0] 92 | const filename = error.file && error.file.split('!').pop() 93 | 94 | notifier.notify({ 95 | title: packageConfig.name, 96 | message: severity + ': ' + error.name, 97 | subtitle: filename || '', 98 | icon: path.join(__dirname, 'logo.png') 99 | }) 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | const createLintingRule = () => ({ 12 | test: /\.(js|vue)$/, 13 | loader: 'eslint-loader', 14 | enforce: 'pre', 15 | include: [resolve('src'), resolve('test')], 16 | options: { 17 | formatter: require('eslint-friendly-formatter'), 18 | emitWarning: !config.dev.showEslintErrorsInOverlay 19 | } 20 | }) 21 | 22 | module.exports = { 23 | context: path.resolve(__dirname, '../'), 24 | entry: { 25 | app: process.env.NODE_ENV === 'production' 26 | ? './src/components/index.js' 27 | : './src/main.js' 28 | }, 29 | output: { 30 | path: config.build.assetsRoot, 31 | filename: '[name].js', 32 | publicPath: process.env.NODE_ENV === 'production' 33 | ? config.build.assetsPublicPath 34 | : config.dev.assetsPublicPath 35 | }, 36 | resolve: { 37 | extensions: ['.js', '.vue', '.json'], 38 | alias: { 39 | 'vue$': 'vue/dist/vue.esm.js', 40 | '@': resolve('src') 41 | } 42 | }, 43 | module: { 44 | rules: [ 45 | ...(config.dev.useEslint ? [createLintingRule()] : []), 46 | { 47 | test: /\.vue$/, 48 | loader: 'vue-loader', 49 | options: vueLoaderConfig 50 | }, 51 | { 52 | test: /\.js$/, 53 | loader: 'babel-loader', 54 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 55 | }, 56 | { 57 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 58 | loader: 'url-loader', 59 | options: { 60 | limit: 10000, 61 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 62 | } 63 | }, 64 | { 65 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 66 | loader: 'url-loader', 67 | options: { 68 | limit: 10000, 69 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 70 | } 71 | }, 72 | { 73 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 74 | loader: 'url-loader', 75 | options: { 76 | limit: 10000, 77 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 78 | } 79 | } 80 | ] 81 | }, 82 | node: { 83 | // prevent webpack from injecting useless setImmediate polyfill because Vue 84 | // source contains it (although only uses it if it's native). 85 | setImmediate: false, 86 | // prevent webpack from injecting mocks to Node native modules 87 | // that does not make sense for the client 88 | dgram: 'empty', 89 | fs: 'empty', 90 | net: 'empty', 91 | tls: 'empty', 92 | child_process: 'empty' 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const path = require('path') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 11 | const portfinder = require('portfinder') 12 | 13 | const HOST = process.env.HOST 14 | const PORT = process.env.PORT && Number(process.env.PORT) 15 | 16 | const devWebpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 19 | }, 20 | // cheap-module-eval-source-map is faster for development 21 | devtool: config.dev.devtool, 22 | 23 | // these devServer options should be customized in /config/index.js 24 | devServer: { 25 | clientLogLevel: 'warning', 26 | historyApiFallback: { 27 | rewrites: [ 28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, 29 | ], 30 | }, 31 | hot: true, 32 | contentBase: false, // since we use CopyWebpackPlugin. 33 | compress: true, 34 | host: HOST || config.dev.host, 35 | port: PORT || config.dev.port, 36 | open: config.dev.autoOpenBrowser, 37 | overlay: config.dev.errorOverlay 38 | ? { warnings: false, errors: true } 39 | : false, 40 | publicPath: config.dev.assetsPublicPath, 41 | proxy: config.dev.proxyTable, 42 | quiet: true, // necessary for FriendlyErrorsPlugin 43 | watchOptions: { 44 | poll: config.dev.poll, 45 | } 46 | }, 47 | plugins: [ 48 | new webpack.DefinePlugin({ 49 | 'process.env': require('../config/dev.env') 50 | }), 51 | new webpack.HotModuleReplacementPlugin(), 52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 53 | new webpack.NoEmitOnErrorsPlugin(), 54 | // https://github.com/ampedandwired/html-webpack-plugin 55 | new HtmlWebpackPlugin({ 56 | filename: 'index.html', 57 | template: 'index.html', 58 | inject: true 59 | }), 60 | // copy custom static assets 61 | new CopyWebpackPlugin([ 62 | { 63 | from: path.resolve(__dirname, '../static'), 64 | to: config.dev.assetsSubDirectory, 65 | ignore: ['.*'] 66 | } 67 | ]) 68 | ] 69 | }) 70 | 71 | module.exports = new Promise((resolve, reject) => { 72 | portfinder.basePort = process.env.PORT || config.dev.port 73 | portfinder.getPort((err, port) => { 74 | if (err) { 75 | reject(err) 76 | } else { 77 | // publish the new Port, necessary for e2e tests 78 | process.env.PORT = port 79 | // add port to devServer config 80 | devWebpackConfig.devServer.port = port 81 | 82 | // Add FriendlyErrorsPlugin 83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 84 | compilationSuccessInfo: { 85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 86 | }, 87 | onErrors: config.dev.notifyOnErrors 88 | ? utils.createNotifierCallback() 89 | : undefined 90 | })) 91 | 92 | resolve(devWebpackConfig) 93 | } 94 | }) 95 | }) 96 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 13 | 14 | const env = require('../config/prod.env') 15 | 16 | const webpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: config.build.productionSourceMap, 20 | extract: true, 21 | usePostCSS: true 22 | }) 23 | }, 24 | devtool: config.build.productionSourceMap ? config.build.devtool : false, 25 | output: { 26 | path: config.build.assetsRoot, 27 | publicPath: config.build.assetsPublicPath, 28 | filename: 'vue-image-transform.min.js', 29 | library: 'vue-image-transform', 30 | libraryTarget: 'umd' 31 | }, 32 | plugins: [ 33 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 34 | new webpack.DefinePlugin({ 35 | 'process.env': env 36 | }), 37 | new webpack.optimize.UglifyJsPlugin({ 38 | compress: { 39 | warnings: false 40 | }, 41 | sourceMap: true 42 | }), 43 | // extract css into its own file 44 | new ExtractTextPlugin({ 45 | // filename: utils.assetsPath('css/[name].[contenthash].css') 46 | filename: 'vue-image-transform.min.css' 47 | }), 48 | new OptimizeCSSPlugin() 49 | ] 50 | }) 51 | 52 | if (config.build.productionGzip) { 53 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 54 | 55 | webpackConfig.plugins.push( 56 | new CompressionWebpackPlugin({ 57 | asset: '[path].gz[query]', 58 | algorithm: 'gzip', 59 | test: new RegExp( 60 | '\\.(' + 61 | config.build.productionGzipExtensions.join('|') + 62 | ')$' 63 | ), 64 | threshold: 10240, 65 | minRatio: 0.8 66 | }) 67 | ) 68 | } 69 | 70 | if (config.build.bundleAnalyzerReport) { 71 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 72 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 73 | } 74 | 75 | module.exports = webpackConfig 76 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.2.8 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | proxyTable: {}, 12 | host: '0.0.0.0', 13 | port: 8089, 14 | autoOpenBrowser: false, 15 | errorOverlay: true, 16 | notifyOnErrors: true, 17 | poll: false, 18 | showEslintErrorsInOverlay: false, 19 | devtool: 'cheap-module-eval-source-map', 20 | cacheBusting: true, 21 | cssSourceMap: true, 22 | }, 23 | build: { 24 | env: require('./prod.env'), 25 | assetsRoot: path.resolve(__dirname, '../dist'), 26 | assetsPublicPath: '/', 27 | assetsSubDirectory: '/', 28 | productionSourceMap: true, 29 | productionGzip: false, 30 | productionGzipExtensions: ['js', 'css'], 31 | bundleAnalyzerReport: process.env.npm_config_report 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /dist/fonts/iconfont.400930b.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/purestart/vue-image-transform/8b6247df7c8d084e20137631d415fa4470e47241/dist/fonts/iconfont.400930b.ttf -------------------------------------------------------------------------------- /dist/fonts/iconfont.d46bcc2.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/purestart/vue-image-transform/8b6247df7c8d084e20137631d415fa4470e47241/dist/fonts/iconfont.d46bcc2.eot -------------------------------------------------------------------------------- /dist/img/iconfont.4327f2c.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /dist/vue-image-transform.min.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:iconfont;src:url(//fonts/iconfont.d46bcc2.eot);src:url(//fonts/iconfont.d46bcc2.eot#iefix) format("embedded-opentype"),url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"),url(//fonts/iconfont.400930b.ttf) format("truetype"),url(//img/iconfont.4327f2c.svg#iconfont) format("svg")}.iconfont[data-v-58932f48]{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-all[data-v-58932f48]:before{content:"\E696"}.icon-back[data-v-58932f48]:before{content:"\E697"}.icon-close1[data-v-58932f48]:before{content:"\E69A"}.icon-delete[data-v-58932f48]:before{content:"\E69D"}.icon-help[data-v-58932f48]:before{content:"\E6A3"}.icon-moreunfold[data-v-58932f48]:before{content:"\E6A6"}.icon-pic[data-v-58932f48]:before{content:"\E6A8"}.icon-search[data-v-58932f48]:before{content:"\E6AC"}.icon-set[data-v-58932f48]:before{content:"\E6AE"}.icon-smile[data-v-58932f48]:before{content:"\E6AF"}.icon-viewgallery[data-v-58932f48]:before{content:"\E6B4"}.icon-viewlist[data-v-58932f48]:before{content:"\E6B5"}.icon-close[data-v-58932f48]:before{content:"\E619"}.icon-subtract[data-v-58932f48]:before{content:"\E6FE"}.icon-gerenzhongxin[data-v-58932f48]:before{content:"\E70B"}.icon-icondownload[data-v-58932f48]:before{content:"\E714"}.icon-map[data-v-58932f48]:before{content:"\E715"}.icon-bad[data-v-58932f48]:before{content:"\E716"}.icon-good[data-v-58932f48]:before{content:"\E717"}.icon-yinlemusic217[data-v-58932f48]:before{content:"\E713"}.icon-home[data-v-58932f48]:before{content:"\E60B"}.icon-search1187938easyiconnet[data-v-58932f48]:before{content:"\E61D"}.icon-yinlemusic216[data-v-58932f48]:before{content:"\E71E"}.icon-right[data-v-58932f48]:before{content:"\E6C7"}.icon-hot[data-v-58932f48]:before{content:"\E756"}.icon-add[data-v-58932f48]:before{content:"\E63C"}.icon-speaker-6[data-v-58932f48]:before{content:"\E66F"}.icon-speaker-5[data-v-58932f48]:before{content:"\E670"}.icon-yanzhengma[data-v-58932f48]:before{content:"\E682"}.icon-Security[data-v-58932f48]:before{content:"\E630"}.icon-icon-test[data-v-58932f48]:before{content:"\E62B"}[data-v-58932f48],[data-v-58932f48]:after,[data-v-58932f48]:before{box-sizing:border-box}.image-dialog .image-dialog-trigger[data-v-58932f48],.image-dialog[data-v-58932f48]{width:100%}.image-dialog .image-dialog-trigger.hidden[data-v-58932f48]{opacity:0}.image-dialog .slot-content[data-v-58932f48]{transition:opacity .6s ease;opacity:0}.image-dialog .slot-content.visible[data-v-58932f48]{opacity:1}.image-dialog .image-dialog-full[data-v-58932f48]{display:-ms-flexbox;display:flex}.image-dialog .image-dialog-full .cancle-btn[data-v-58932f48]{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:15px;padding-left:10px;padding-right:4px;color:#777}.image-dialog .input-wrapper[data-v-58932f48]{background-color:#efeff4;border-bottom:1px solid #e4e4e4;padding:2vw;box-sizing:border-box;width:100vw}.image-dialog .input-wrapper .input[data-v-58932f48]{border:none;outline:none;padding:5px;font-size:15px;border-radius:5px;min-height:7vw;background-color:#fff;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex:1;flex:1;transition:width 3s}.image-dialog .input-wrapper .input input[data-v-58932f48]{border:none;outline:none;padding:5px;font-size:15px;border-radius:5px;padding-left:0;-ms-flex:1;flex:1}.image-dialog .input-wrapper .input .iconfont[data-v-58932f48]{color:#999;margin-left:1vw;margin-right:2vw;font-size:15px;padding-top:0}.image-dialog .input-wrapper .input .palceholder[data-v-58932f48]{color:#999}.image-dialog-thumb[data-v-58932f48]{-o-object-fit:cover;object-fit:cover}.image-dialog-trigger[data-v-58932f48]{margin:0;padding:0;background:none;border:none;cursor:pointer}.image-dialog-close[data-v-58932f48]{position:absolute;right:20px;top:20px;width:40px;height:40px;padding:0;background:none;border:none;cursor:pointer;transition:.3s ease-out;outline:none}.image-dialog-close[data-v-58932f48]:after,.image-dialog-close[data-v-58932f48]:before{content:"";position:absolute;left:50%;top:50%;margin-top:-.5px;margin-left:-20px;width:30px;height:1px;background-color:#000}.image-dialog-close[data-v-58932f48]:before{transform:rotate(45deg)}.image-dialog-close[data-v-58932f48]:after{transform:rotate(135deg)}.image-dialog-close[data-v-58932f48]:hover{transform:rotate(270deg)}.image-dialog-background[data-v-58932f48]{overflow:auto;position:fixed;top:0;right:0;left:0;bottom:0;width:100vw;height:100vh;background-color:hsla(0,0%,100%,.95);text-align:center;z-index:1}.image-dialog-animate[data-v-58932f48]{display:none;position:absolute;transform-origin:left top}.image-dialog-animate.loading[data-v-58932f48]{display:block}.dialog-enter-active[data-v-58932f48],.dialog-leave-active[data-v-58932f48]{transition:background-color .3s ease-out}.dialog-enter[data-v-58932f48],.dialog-leave-to[data-v-58932f48]{background-color:hsla(0,0%,100%,0)}.dialog-enter-active .image-dialog-animate[data-v-58932f48],.dialog-leave-active .image-dialog-animate[data-v-58932f48]{display:block;transition:transform .3s cubic-bezier(1,0,.7,1)}.dialog-enter-active .image-dialog-full[data-v-58932f48],.dialog-leave-active .image-dialog-full[data-v-58932f48]{visibility:hidden}.image-dialog-trigger img[data-v-58932f48]{width:100%;height:100%} -------------------------------------------------------------------------------- /dist/vue-image-transform.min.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["vue-image-transform"]=e():t["vue-image-transform"]=e()}("undefined"!=typeof self?self:this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var a=i[n]={i:n,l:!1,exports:{}};return t[n].call(a.exports,a,a.exports,e),a.l=!0,a.exports}var i={};return e.m=t,e.c=i,e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/",e(e.s=1)}([function(t,e,i){"use strict";e.a={props:{thumb:String,full:String,radius:Number,onSearch:{type:Function,required:!0,default:function(){}},onChange:{type:Function,required:!1,default:function(){}}},data:function(){return{loaded:!1,slotVisiable:!1,appearedDialog:!1,fullWidth:0,fullHeight:0,keyword:"",showCancle:!1}},created:function(){this.fullWidth=window.screen.width,this.fullHeight=window.screen.height},mounted:function(){},methods:{onInput:function(t){this.onChange(t.target.value)},submitForm:function(){this.keyword.length>0?(this.appearedDialog=!1,this.onSearch(this.keyword)):this.hideDialog()},getImgNaturalDimensions:function(t,e){var i,n;if(t.naturalWidth){var a=new Image;a.onload=function(){var t=a.width,i=a.height;e({w:t,h:i})},a.src=t.src}else i=t.naturalWidth,n=t.naturalHeight,e({w:i,h:n})},getEleNaturalDimensions:function(t,e){var i,n;i=t.offsetWidth,n=t.offsetHeight,e({w:i,h:n})},showDialog:function(){var t=this,e=this.$refs.thumb;this.getEleNaturalDimensions(e,function(e){e.w>e.h?t.fullHeight=e.h/e.w*t.fullWidth:t.fullWidth=e.w/e.h*t.fullHeight,t.maxWidth&&t.maxWidth>0&&t.fullWidth>t.maxWidth&&(t.fullWidth=t.maxWidth,t.fullHeight=e.h/e.w*t.fullWidth),t.maxHeight&&t.maxHeight>0&&t.fullHeight>t.maxHeight&&(t.fullHeight=t.maxHeight,t.fullWidth=e.w/e.h*t.fullHeight)}),this.appearedDialog=!0},hideDialog:function(){this.appearedDialog=!1},enter:function(){var t=this;this.animateImage(this.$refs.thumb,this.$refs.full,this.$refs.cancleBtn,1),setTimeout(function(){t.loaded=!0,t.slotVisiable=!0},300)},leave:function(){var t=this;this.animateImage(this.$refs.full,this.$refs.thumb,this.$refs.cancleBtn,0),this.slotVisiable=!1,setTimeout(function(){t.loaded=!1},300)},onLoadFull:function(){this.loaded=!0},animateImage:function(t,e,i,n){var a=this,o=this.getBoundForDialog(t);this.setStart(o);var s=this.getBoundForDialog(i);this.$nextTick(function(){var t=a.getBoundForDialog(e);a.setDestination(o,{top:t.top,left:t.left,width:t.width||a.fullWidth,height:t.height||a.fullHeight},s,n)})},getBoundForDialog:function(t){var e=t.getBoundingClientRect(),i=this.$refs.dialog;return{top:e.top+i.scrollTop,left:e.left+i.scrollLeft,width:e.width,height:e.height}},setStart:function(t){var e=this.$refs.animate;e.style.left=t.left+"px",e.style.top=t.top+"px",e.style.width=t.width+"px",e.style.height=t.height+"px",e.style.transitionDuration="0s",e.style.transform=""},setDestination:function(t,e,i,n){var a=this.$refs.animate;a.style.transitionDuration="",1==n&&(e.width=e.width-i.width);var o="translate("+(e.left-t.left)+"px, "+(e.top-t.top)+"px)",s="scale("+e.width/t.width+", "+e.height/t.height+")";a.style.transform=o+" "+s}}}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(2);i.d(e,"SearchBar",function(){return n.a})},function(t,e,i){"use strict";var n=i(3),a={install:function(t){t.component("search-bar",n.a)}};e.a=a},function(t,e,i){"use strict";function n(t){i(4)}var a=i(0),o=i(6),s=i(5),r=n,l=s(a.a,o.a,!1,r,"data-v-58932f48",null);e.a=l.exports},function(t,e){},function(t,e){t.exports=function(t,e,i,n,a,o){var s,r=t=t||{},l=typeof t.default;"object"!==l&&"function"!==l||(s=t,r=t.default);var u="function"==typeof r?r.options:r;e&&(u.render=e.render,u.staticRenderFns=e.staticRenderFns,u._compiled=!0),i&&(u.functional=!0),a&&(u._scopeId=a);var c;if(o?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},u._ssrRegister=c):n&&(c=n),c){var d=u.functional,f=d?u.render:u.beforeCreate;d?(u._injectStyles=c,u.render=function(t,e){return c.call(e),f(t,e)}):u.beforeCreate=f?[].concat(f,c):[c]}return{esModule:s,exports:r,options:u}}},function(t,e,i){"use strict";var n=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"image-dialog"},[i("div",{staticClass:"image-dialog-trigger",class:1==t.loaded?"hidden":"",attrs:{type:"button"},on:{click:t.showDialog}},[i("div",{ref:"thumb",staticClass:"input-wrapper"},[t._m(0)])]),t._v(" "),i("transition",{attrs:{name:"dialog"},on:{enter:t.enter,leave:t.leave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:t.appearedDialog,expression:"appearedDialog"}],ref:"dialog",staticClass:"image-dialog-background"},[t._e(),t._v(" "),i("div",{ref:"animate",staticClass:"input-wrapper image-dialog-animate"},[i("div",{staticClass:"input"},[i("i",{staticClass:"iconfont icon-search1187938easyiconnet"}),t._v(" "),i("span",{staticClass:"palceholder"},[t._v("名称/单号/库房")])])]),t._v(" "),i("div",{ref:"full",staticClass:"input-wrapper image-dialog-full",on:{load:t.onLoadFull}},[i("div",{staticClass:"input"},[i("i",{staticClass:"iconfont icon-search1187938easyiconnet"}),t._v(" "),i("input",{directives:[{name:"model",rawName:"v-model",value:t.keyword,expression:"keyword"}],staticClass:"palceholder",attrs:{placeholder:"名称/单号/库房"},domProps:{value:t.keyword},on:{input:[function(e){e.target.composing||(t.keyword=e.target.value)},t.onInput]}}),t._v(" "),i("i",{staticClass:"iconfont icon-close1",on:{click:function(){t.keyword=""}}})]),t._v(" "),i("div",{ref:"cancleBtn",staticClass:"cancle-btn",on:{click:t.submitForm}},[t._v("\n "+t._s(t.keyword.length>0?"搜索":"取消")+"\n ")])]),t._v(" "),i("div",{staticClass:"slot-content",class:t.slotVisiable?"visible":""},[t._t("default")],2)])])],1)},a=[function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"input"},[i("i",{staticClass:"iconfont icon-search1187938easyiconnet"}),t._v(" "),i("span",{staticClass:"palceholder"},[t._v("名称/单号/库房")])])}],o={render:n,staticRenderFns:a};e.a=o}])}); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-image-transform 7 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-image-transform", 3 | "version": "0.1.4", 4 | "author": "purestart <522382456@qq.com>", 5 | "description": "vue-image-transform image-transform image-deform vue conponent", 6 | "keywords": [ 7 | "vue-image-transform", 8 | "image-transform", 9 | "imageTransform", 10 | "image-deform", 11 | "vue" 12 | ], 13 | "homepage": "https://github.com/purestart/vue-image-transform", 14 | "bugs": { 15 | "url": "https://github.com/purestart/vue-image-transform/issues" 16 | }, 17 | "license": "MIT", 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/purestart/vue-image-transform.git" 21 | }, 22 | "private": false, 23 | "main": "dist/vue-image-transform.min.js", 24 | "scripts": { 25 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 26 | "start": "npm run dev", 27 | "lint": "eslint --ext .js,.vue src", 28 | "build": "node build/build.js" 29 | }, 30 | "dependencies": { 31 | "vue": "^2.5.2", 32 | "vue-router": "^3.0.1" 33 | }, 34 | "devDependencies": { 35 | "autoprefixer": "^7.1.2", 36 | "babel-core": "^6.22.1", 37 | "babel-eslint": "^7.1.1", 38 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 39 | "babel-loader": "^7.1.1", 40 | "babel-plugin-syntax-dynamic-import": "^6.18.0", 41 | "babel-plugin-syntax-jsx": "^6.18.0", 42 | "babel-plugin-transform-runtime": "^6.22.0", 43 | "babel-plugin-transform-vue-jsx": "^3.5.0", 44 | "babel-preset-env": "^1.3.2", 45 | "babel-preset-stage-2": "^6.22.0", 46 | "chalk": "^2.0.1", 47 | "copy-webpack-plugin": "^4.0.1", 48 | "css-loader": "^0.28.0", 49 | "eslint": "^3.19.0", 50 | "eslint-config-standard": "^10.2.1", 51 | "eslint-friendly-formatter": "^3.0.0", 52 | "eslint-loader": "^1.7.1", 53 | "eslint-plugin-html": "^3.0.0", 54 | "eslint-plugin-import": "^2.7.0", 55 | "eslint-plugin-node": "^5.2.0", 56 | "eslint-plugin-promise": "^3.4.0", 57 | "eslint-plugin-standard": "^3.0.1", 58 | "extract-text-webpack-plugin": "^3.0.0", 59 | "file-loader": "^1.1.4", 60 | "friendly-errors-webpack-plugin": "^1.6.1", 61 | "html-webpack-plugin": "^2.30.1", 62 | "node-notifier": "^5.1.2", 63 | "node-sass": "^4.5.3", 64 | "optimize-css-assets-webpack-plugin": "^3.2.0", 65 | "ora": "^1.2.0", 66 | "portfinder": "^1.0.13", 67 | "postcss-import": "^11.0.0", 68 | "postcss-loader": "^2.0.8", 69 | "postcss-url": "^7.2.1", 70 | "rimraf": "^2.6.0", 71 | "sass-loader": "^6.0.6", 72 | "semver": "^5.3.0", 73 | "shelljs": "^0.7.6", 74 | "uglifyjs-webpack-plugin": "^1.1.1", 75 | "url-loader": "^0.5.8", 76 | "vue-loader": "^13.3.0", 77 | "vue-style-loader": "^3.0.1", 78 | "vue-template-compiler": "^2.5.2", 79 | "webpack": "^3.6.0", 80 | "webpack-bundle-analyzer": "^2.9.0", 81 | "webpack-dev-server": "^2.9.1", 82 | "webpack-merge": "^4.1.0" 83 | }, 84 | "engines": { 85 | "node": ">= 6.0.0", 86 | "npm": ">= 3.0.0" 87 | }, 88 | "browserslist": [ 89 | "> 1%", 90 | "last 2 versions", 91 | "not ie <= 8" 92 | ] 93 | } 94 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | 16 | 18 | -------------------------------------------------------------------------------- /src/components/ImageTransform/ImageTransform.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 646 | 647 | -------------------------------------------------------------------------------- /src/components/ImageTransform/PerspectiveTransform.min.js: -------------------------------------------------------------------------------- 1 | (function(a){a(function(){function b(e,f,c,d){this.element=e;this.style=e.style;this.computedStyle=window.getComputedStyle(e);this.width=f;this.height=c;this.useBackFacing=!!d;this.topLeft={x:0,y:0};this.topRight={x:f,y:0};this.bottomLeft={x:0,y:c};this.bottomRight={x:f,y:c}}b.useDPRFix=false;b.dpr=1;b.prototype=(function(){var d={stylePrefix:""};var f;var k;var c;var m=[[0,0,1,0,0,0,0,0],[0,0,1,0,0,0,0,0],[0,0,1,0,0,0,0,0],[0,0,1,0,0,0,0,0],[0,0,0,0,0,1,0,0],[0,0,0,0,0,1,0,0],[0,0,0,0,0,1,0,0],[0,0,0,0,0,1,0,0]];var i=[0,0,0,0,0,0,0,0];function n(){var o=document.createElement("div").style;d.stylePrefix="webkitTransform" in o?"webkit":"MozTransform" in o?"Moz":"msTransform" in o?"ms":"";f=d.stylePrefix+(d.stylePrefix.length>0?"Transform":"transform");c="-"+d.stylePrefix.toLowerCase()+"-transform-origin"}function h(){var p=this.topLeft.x-this.topRight.x;var o=this.topLeft.y-this.topRight.y;if(Math.sqrt(p*p+o*o)<=1){return true}p=this.bottomLeft.x-this.bottomRight.x;o=this.bottomLeft.y-this.bottomRight.y;if(Math.sqrt(p*p+o*o)<=1){return true}p=this.topLeft.x-this.bottomLeft.x;o=this.topLeft.y-this.bottomLeft.y;if(Math.sqrt(p*p+o*o)<=1){return true}p=this.topRight.x-this.bottomRight.x;o=this.topRight.y-this.bottomRight.y;if(Math.sqrt(p*p+o*o)<=1){return true}p=this.topLeft.x-this.bottomRight.x;o=this.topLeft.y-this.bottomRight.y;if(Math.sqrt(p*p+o*o)<=1){return true}p=this.topRight.x-this.bottomLeft.x;o=this.topRight.y-this.bottomLeft.y;if(Math.sqrt(p*p+o*o)<=1){return true}return false}function j(q,p,o){return q.x*p.y+p.x*o.y+o.x*q.y-q.y*p.x-p.y*o.x-o.y*q.x}function l(){var p=j(this.topLeft,this.topRight,this.bottomRight);var o=j(this.bottomRight,this.bottomLeft,this.topLeft);if(this.useBackFacing){if(p*o<=0){return true}}else{if(p<=0||o<=0){return true}}var p=j(this.topRight,this.bottomRight,this.bottomLeft);var o=j(this.bottomLeft,this.topLeft,this.topRight);if(this.useBackFacing){if(p*o<=0){return true}}else{if(p<=0||o<=0){return true}}return false}function g(){if(h.apply(this)){return 1}if(l.apply(this)){return 2}return 0}function e(){var x=this.width;var v=this.height;var E=0;var D=0;var t=this.computedStyle.getPropertyValue(c);if(t.indexOf("px")>-1){t=t.split("px");E=-parseFloat(t[0]);D=-parseFloat(t[1])}else{if(t.indexOf("%")>-1){t=t.split("%");E=-parseFloat(t[0])*x/100;D=-parseFloat(t[1])*v/100}}var G=[this.topLeft,this.topRight,this.bottomLeft,this.bottomRight];var q=[0,1,2,3,4,5,6,7];for(var B=0;B<4;B++){m[B][0]=m[B+4][3]=B&1?x+E:E;m[B][1]=m[B+4][4]=(B>1?v+D:D);m[B][6]=(B&1?-E-x:-E)*(G[B].x+E);m[B][7]=(B>1?-D-v:-D)*(G[B].x+E);m[B+4][6]=(B&1?-E-x:-E)*(G[B].y+D);m[B+4][7]=(B>1?-D-v:-D)*(G[B].y+D);i[B]=(G[B].x+E);i[B+4]=(G[B].y+D);m[B][2]=m[B+4][5]=1;m[B][3]=m[B][4]=m[B][5]=m[B+4][0]=m[B+4][1]=m[B+4][2]=0}var y,r;var u;var s=[];var B,A,z,F;for(var A=0;A<8;A++){for(var B=0;B<8;B++){s[B]=m[B][A]}for(B=0;B<8;B++){u=m[B];y=BMath.abs(s[w])){w=B}}if(w!=A){for(z=0;z<8;z++){F=m[w][z];m[w][z]=m[A][z];m[A][z]=F}F=q[w];q[w]=q[A];q[A]=F}if(m[A][A]!=0){for(B=A+1;B<8;B++){m[B][A]/=m[A][A]}}}for(B=0;B<8;B++){q[B]=i[q[B]]}for(z=0;z<8;z++){for(B=z+1;B<8;B++){q[B]-=q[z]*m[B][z]}}for(z=7;z>-1;z--){q[z]/=m[z][z];for(B=0;Bw&&(d=l,w=f),0==o[l]&&g++}if(!(g>1)){var M=2,m=5*M,x=this.p.ctxo,u=this.p.ctxt;if(u.clearRect(0,0,u.canvas.width,u.canvas.height),d%2==0)for(var _=this.create_canvas_context(v,m),I=_.canvas,q=0;q 2 |
3 | 4 | 5 |
6 | 7 | 8 | 26 | 27 | -------------------------------------------------------------------------------- /src/examples/index.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 52 | 53 | 92 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App'; 3 | import router from './router'; 4 | 5 | import {ImageTransform} from '@/components'; 6 | // import '../dist/vue-search-bar.min.css'; 7 | 8 | 9 | Vue.use(ImageTransform); 10 | 11 | Vue.config.productionTip = false; 12 | 13 | /* eslint-disable no-new */ 14 | new Vue({ 15 | el: '#app', 16 | router, 17 | template: '', 18 | components: { App } 19 | }); -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | const Index = () => import('@/examples/index.vue'); 4 | 5 | 6 | Vue.use(Router); 7 | 8 | export default new Router({ 9 | routes: [ 10 | { 11 | path: '/', 12 | name: 'index', 13 | component: Index 14 | } 15 | ] 16 | }); 17 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/purestart/vue-image-transform/8b6247df7c8d084e20137631d415fa4470e47241/static/.gitkeep -------------------------------------------------------------------------------- /static/font_demo/demo.css: -------------------------------------------------------------------------------- 1 | *{margin: 0;padding: 0;list-style: none;} 2 | /* 3 | KISSY CSS Reset 4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。 5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。 6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。 7 | 特色：1. 适应中文；2. 基于最新主流浏览器。 8 | 维护：玉伯, 正淳 9 | */ 10 | 11 | /** 清除内外边距 **/ 12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ 13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 14 | pre, /* text formatting elements 文本格式元素 */ 15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ 16 | th, td /* table elements 表格元素 */ { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | /** 设置默认字体 **/ 22 | body, 23 | button, input, select, textarea /* for ie */ { 24 | font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; 25 | } 26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; } 27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ 28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ 29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */ 30 | 31 | /** 重置列表元素 **/ 32 | ul, ol { list-style: none; } 33 | 34 | /** 重置文本格式元素 **/ 35 | a { text-decoration: none; } 36 | a:hover { text-decoration: underline; } 37 | 38 | 39 | /** 重置表单元素 **/ 40 | legend { color: #000; } /* for ie6 */ 41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */ 42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ 43 | /* 注：optgroup 无法扶正 */ 44 | 45 | /** 重置表格元素 **/ 46 | table { border-collapse: collapse; border-spacing: 0; } 47 | 48 | /* 清除浮动 */ 49 | .ks-clear:after, .clear:after { 50 | content: '\20'; 51 | display: block; 52 | height: 0; 53 | clear: both; 54 | } 55 | .ks-clear, .clear { 56 | *zoom: 1; 57 | } 58 | 59 | .main { 60 | padding: 30px 100px; 61 | width: 960px; 62 | margin: 0 auto; 63 | } 64 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} 65 | 66 | .helps{margin-top:40px;} 67 | .helps pre{ 68 | padding:20px; 69 | margin:10px 0; 70 | border:solid 1px #e7e1cd; 71 | background-color: #fffdef; 72 | overflow: auto; 73 | } 74 | 75 | .icon_lists{ 76 | width: 100% !important; 77 | 78 | } 79 | 80 | .icon_lists li{ 81 | float:left; 82 | width: 100px; 83 | height:180px; 84 | text-align: center; 85 | list-style: none !important; 86 | } 87 | .icon_lists .icon{ 88 | font-size: 42px; 89 | line-height: 100px; 90 | margin: 10px 0; 91 | color:#333; 92 | -webkit-transition: font-size 0.25s ease-out 0s; 93 | -moz-transition: font-size 0.25s ease-out 0s; 94 | transition: font-size 0.25s ease-out 0s; 95 | 96 | } 97 | .icon_lists .icon:hover{ 98 | font-size: 100px; 99 | } 100 | 101 | 102 | 103 | .markdown { 104 | color: #666; 105 | font-size: 14px; 106 | line-height: 1.8; 107 | } 108 | 109 | .highlight { 110 | line-height: 1.5; 111 | } 112 | 113 | .markdown img { 114 | vertical-align: middle; 115 | max-width: 100%; 116 | } 117 | 118 | .markdown h1 { 119 | color: #404040; 120 | font-weight: 500; 121 | line-height: 40px; 122 | margin-bottom: 24px; 123 | } 124 | 125 | .markdown h2, 126 | .markdown h3, 127 | .markdown h4, 128 | .markdown h5, 129 | .markdown h6 { 130 | color: #404040; 131 | margin: 1.6em 0 0.6em 0; 132 | font-weight: 500; 133 | clear: both; 134 | } 135 | 136 | .markdown h1 { 137 | font-size: 28px; 138 | } 139 | 140 | .markdown h2 { 141 | font-size: 22px; 142 | } 143 | 144 | .markdown h3 { 145 | font-size: 16px; 146 | } 147 | 148 | .markdown h4 { 149 | font-size: 14px; 150 | } 151 | 152 | .markdown h5 { 153 | font-size: 12px; 154 | } 155 | 156 | .markdown h6 { 157 | font-size: 12px; 158 | } 159 | 160 | .markdown hr { 161 | height: 1px; 162 | border: 0; 163 | background: #e9e9e9; 164 | margin: 16px 0; 165 | clear: both; 166 | } 167 | 168 | .markdown p, 169 | .markdown pre { 170 | margin: 1em 0; 171 | } 172 | 173 | .markdown > p, 174 | .markdown > blockquote, 175 | .markdown > .highlight, 176 | .markdown > ol, 177 | .markdown > ul { 178 | width: 80%; 179 | } 180 | 181 | .markdown ul > li { 182 | list-style: circle; 183 | } 184 | 185 | .markdown > ul li, 186 | .markdown blockquote ul > li { 187 | margin-left: 20px; 188 | padding-left: 4px; 189 | } 190 | 191 | .markdown > ul li p, 192 | .markdown > ol li p { 193 | margin: 0.6em 0; 194 | } 195 | 196 | .markdown ol > li { 197 | list-style: decimal; 198 | } 199 | 200 | .markdown > ol li, 201 | .markdown blockquote ol > li { 202 | margin-left: 20px; 203 | padding-left: 4px; 204 | } 205 | 206 | .markdown code { 207 | margin: 0 3px; 208 | padding: 0 5px; 209 | background: #eee; 210 | border-radius: 3px; 211 | } 212 | 213 | .markdown pre { 214 | border-radius: 6px; 215 | background: #f7f7f7; 216 | padding: 20px; 217 | } 218 | 219 | .markdown pre code { 220 | border: none; 221 | background: #f7f7f7; 222 | margin: 0; 223 | } 224 | 225 | .markdown strong, 226 | .markdown b { 227 | font-weight: 600; 228 | } 229 | 230 | .markdown > table { 231 | border-collapse: collapse; 232 | border-spacing: 0px; 233 | empty-cells: show; 234 | border: 1px solid #e9e9e9; 235 | width: 95%; 236 | margin-bottom: 24px; 237 | } 238 | 239 | .markdown > table th { 240 | white-space: nowrap; 241 | color: #333; 242 | font-weight: 600; 243 | 244 | } 245 | 246 | .markdown > table th, 247 | .markdown > table td { 248 | border: 1px solid #e9e9e9; 249 | padding: 8px 16px; 250 | text-align: left; 251 | } 252 | 253 | .markdown > table th { 254 | background: #F7F7F7; 255 | } 256 | 257 | .markdown blockquote { 258 | font-size: 90%; 259 | color: #999; 260 | border-left: 4px solid #e9e9e9; 261 | padding-left: 0.8em; 262 | margin: 1em 0; 263 | font-style: italic; 264 | } 265 | 266 | .markdown blockquote p { 267 | margin: 0; 268 | } 269 | 270 | .markdown .anchor { 271 | opacity: 0; 272 | transition: opacity 0.3s ease; 273 | margin-left: 8px; 274 | } 275 | 276 | .markdown .waiting { 277 | color: #ccc; 278 | } 279 | 280 | .markdown h1:hover .anchor, 281 | .markdown h2:hover .anchor, 282 | .markdown h3:hover .anchor, 283 | .markdown h4:hover .anchor, 284 | .markdown h5:hover .anchor, 285 | .markdown h6:hover .anchor { 286 | opacity: 1; 287 | display: inline-block; 288 | } 289 | 290 | .markdown > br, 291 | .markdown > p > br { 292 | clear: both; 293 | } 294 | 295 | 296 | .hljs { 297 | display: block; 298 | background: white; 299 | padding: 0.5em; 300 | color: #333333; 301 | overflow-x: auto; 302 | } 303 | 304 | .hljs-comment, 305 | .hljs-meta { 306 | color: #969896; 307 | } 308 | 309 | .hljs-string, 310 | .hljs-variable, 311 | .hljs-template-variable, 312 | .hljs-strong, 313 | .hljs-emphasis, 314 | .hljs-quote { 315 | color: #df5000; 316 | } 317 | 318 | .hljs-keyword, 319 | .hljs-selector-tag, 320 | .hljs-type { 321 | color: #a71d5d; 322 | } 323 | 324 | .hljs-literal, 325 | .hljs-symbol, 326 | .hljs-bullet, 327 | .hljs-attribute { 328 | color: #0086b3; 329 | } 330 | 331 | .hljs-section, 332 | .hljs-name { 333 | color: #63a35c; 334 | } 335 | 336 | .hljs-tag { 337 | color: #333333; 338 | } 339 | 340 | .hljs-title, 341 | .hljs-attr, 342 | .hljs-selector-id, 343 | .hljs-selector-class, 344 | .hljs-selector-attr, 345 | .hljs-selector-pseudo { 346 | color: #795da3; 347 | } 348 | 349 | .hljs-addition { 350 | color: #55a532; 351 | background-color: #eaffea; 352 | } 353 | 354 | .hljs-deletion { 355 | color: #bd2c00; 356 | background-color: #ffecec; 357 | } 358 | 359 | .hljs-link { 360 | text-decoration: underline; 361 | } 362 | 363 | pre{ 364 | background: #fff; 365 | } 366 | 367 | 368 | 369 | 370 | 371 | -------------------------------------------------------------------------------- /static/font_demo/demo_fontclass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 11 |
12 |

IconFont 图标

13 |
    14 | 15 |
  • 16 | 17 |
    all
    18 |
    .icon-all
    19 |
    • 20 | 21 |
  • 22 | 23 |
    back
    24 |
    .icon-back
    25 |
    • 26 | 27 |
  • 28 | 29 |
    close
    30 |
    .icon-close1
    31 |
    • 32 | 33 |
  • 34 | 35 |
    delete
    36 |
    .icon-delete
    37 |
    • 38 | 39 |
  • 40 | 41 |
    help
    42 |
    .icon-help
    43 |
    • 44 | 45 |
  • 46 | 47 |
    more_unfold
    48 |
    .icon-moreunfold
    49 |
    • 50 | 51 |
  • 52 | 53 |
    pic
    54 |
    .icon-pic
    55 |
    • 56 | 57 |
  • 58 | 59 |
    search
    60 |
    .icon-search
    61 |
    • 62 | 63 |
  • 64 | 65 |
    set
    66 |
    .icon-set
    67 |
    • 68 | 69 |
  • 70 | 71 |
    Smile
    72 |
    .icon-smile
    73 |
    • 74 | 75 |
  • 76 | 77 |
    ViewGallery
    78 |
    .icon-viewgallery
    79 |
    • 80 | 81 |
  • 82 | 83 |
    Viewlist
    84 |
    .icon-viewlist
    85 |
    • 86 | 87 |
  • 88 | 89 |
    close
    90 |
    .icon-close
    91 |
    • 92 | 93 |
  • 94 | 95 |
    subtract
    96 |
    .icon-subtract
    97 |
    • 98 | 99 |
  • 100 | 101 |
    personal-center
    102 |
    .icon-gerenzhongxin
    103 |
    • 104 | 105 |
  • 106 | 107 |
    download
    108 |
    .icon-icondownload
    109 |
    • 110 | 111 |
  • 112 | 113 |
    map
    114 |
    .icon-map
    115 |
    • 116 | 117 |
  • 118 | 119 |
    bad
    120 |
    .icon-bad
    121 |
    • 122 | 123 |
  • 124 | 125 |
    good
    126 |
    .icon-good
    127 |
    • 128 | 129 |
  • 130 | 131 |
    音乐_music217
    132 |
    .icon-yinlemusic217
    133 |
    • 134 | 135 |
  • 136 | 137 |
    home
    138 |
    .icon-home
    139 |
    • 140 | 141 |
  • 142 | 143 |
    search
    144 |
    .icon-search1187938easyiconnet
    145 |
    • 146 | 147 |
  • 148 | 149 |
    音乐_music216
    150 |
    .icon-yinlemusic216
    151 |
    • 152 | 153 |
  • 154 | 155 |
    right
    156 |
    .icon-right
    157 |
    • 158 | 159 |
  • 160 | 161 |
    hot
    162 |
    .icon-hot
    163 |
    • 164 | 165 |
  • 166 | 167 |
    add
    168 |
    .icon-add
    169 |
    • 170 | 171 |
  • 172 | 173 |
    speaker-6
    174 |
    .icon-speaker-6
    175 |
    • 176 | 177 |
  • 178 | 179 |
    speaker-5
    180 |
    .icon-speaker-5
    181 |
    • 182 | 183 |
  • 184 | 185 |
    security
    186 |
    .icon-yanzhengma
    187 |
    • 188 | 189 |
  • 190 | 191 |
    Security
    192 |
    .icon-Security
    193 |
    • 194 | 195 |
  • 196 | 197 |
    scan
    198 |
    .icon-icon-test
    199 |
    • 200 | 201 |
202 | 203 |

font-class引用

204 |
205 | 206 |

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

207 |

与unicode使用方式相比，具有如下特点：

208 |
    209 |
  • 兼容性良好，支持ie8+，及所有现代浏览器。
    • 210 |
  • 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
    • 211 |
  • 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
    • 212 |
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
    • 213 |
214 |

使用步骤如下：

215 |

第一步：引入项目下面生成的fontclass代码：

216 | 217 | 218 | 
<link rel="stylesheet" type="text/css" href="./iconfont.css">
219 |

第二步：挑选相应图标并获取类名，应用于页面：

220 | 
<i class="iconfont icon-xxx"></i>
221 |
222 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

223 |
224 |
225 | 226 | 227 | -------------------------------------------------------------------------------- /static/font_demo/demo_symbol.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 24 | 25 | 26 |
27 |

IconFont 图标

28 |
    29 | 30 |
  • 31 | 34 |
    all
    35 |
    #icon-all
    36 |
    • 37 | 38 |
  • 39 | 42 |
    back
    43 |
    #icon-back
    44 |
    • 45 | 46 |
  • 47 | 50 |
    close
    51 |
    #icon-close1
    52 |
    • 53 | 54 |
  • 55 | 58 |
    delete
    59 |
    #icon-delete
    60 |
    • 61 | 62 |
  • 63 | 66 |
    help
    67 |
    #icon-help
    68 |
    • 69 | 70 |
  • 71 | 74 |
    more_unfold
    75 |
    #icon-moreunfold
    76 |
    • 77 | 78 |
  • 79 | 82 |
    pic
    83 |
    #icon-pic
    84 |
    • 85 | 86 |
  • 87 | 90 |
    search
    91 |
    #icon-search
    92 |
    • 93 | 94 |
  • 95 | 98 |
    set
    99 |
    #icon-set
    100 |
    • 101 | 102 |
  • 103 | 106 |
    Smile
    107 |
    #icon-smile
    108 |
    • 109 | 110 |
  • 111 | 114 |
    ViewGallery
    115 |
    #icon-viewgallery
    116 |
    • 117 | 118 |
  • 119 | 122 |
    Viewlist
    123 |
    #icon-viewlist
    124 |
    • 125 | 126 |
  • 127 | 130 |
    close
    131 |
    #icon-close
    132 |
    • 133 | 134 |
  • 135 | 138 |
    subtract
    139 |
    #icon-subtract
    140 |
    • 141 | 142 |
  • 143 | 146 |
    personal-center
    147 |
    #icon-gerenzhongxin
    148 |
    • 149 | 150 |
  • 151 | 154 |
    download
    155 |
    #icon-icondownload
    156 |
    • 157 | 158 |
  • 159 | 162 |
    map
    163 |
    #icon-map
    164 |
    • 165 | 166 |
  • 167 | 170 |
    bad
    171 |
    #icon-bad
    172 |
    • 173 | 174 |
  • 175 | 178 |
    good
    179 |
    #icon-good
    180 |
    • 181 | 182 |
  • 183 | 186 |
    音乐_music217
    187 |
    #icon-yinlemusic217
    188 |
    • 189 | 190 |
  • 191 | 194 |
    home
    195 |
    #icon-home
    196 |
    • 197 | 198 |
  • 199 | 202 |
    search
    203 |
    #icon-search1187938easyiconnet
    204 |
    • 205 | 206 |
  • 207 | 210 |
    音乐_music216
    211 |
    #icon-yinlemusic216
    212 |
    • 213 | 214 |
  • 215 | 218 |
    right
    219 |
    #icon-right
    220 |
    • 221 | 222 |
  • 223 | 226 |
    hot
    227 |
    #icon-hot
    228 |
    • 229 | 230 |
  • 231 | 234 |
    add
    235 |
    #icon-add
    236 |
    • 237 | 238 |
  • 239 | 242 |
    speaker-6
    243 |
    #icon-speaker-6
    244 |
    • 245 | 246 |
  • 247 | 250 |
    speaker-5
    251 |
    #icon-speaker-5
    252 |
    • 253 | 254 |
  • 255 | 258 |
    security
    259 |
    #icon-yanzhengma
    260 |
    • 261 | 262 |
  • 263 | 266 |
    Security
    267 |
    #icon-Security
    268 |
    • 269 | 270 |
  • 271 | 274 |
    scan
    275 |
    #icon-icon-test
    276 |
    • 277 | 278 |
279 | 280 | 281 |

symbol引用

282 |
283 | 284 |

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 285 | 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

286 |
    287 |
  • 支持多色图标了，不再受单色限制。
    • 288 |
  • 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
    • 289 |
  • 兼容性较差，支持 ie9+,及现代浏览器。
    • 290 |
  • 浏览器渲染svg的性能一般，还不如png。
    • 291 |
292 |

使用步骤如下：

293 |

第一步：引入项目下面生成的symbol代码：

294 | 
<script src="./iconfont.js"></script>
295 |

第二步：加入通用css代码（引入一次就行）：

296 | 
<style type="text/css">
297 | .icon {
298 |    width: 1em; height: 1em;
299 |    vertical-align: -0.15em;
300 |    fill: currentColor;
301 |    overflow: hidden;
302 | }
303 | </style>
304 |

第三步：挑选相应图标并获取类名，应用于页面：

305 | 
<svg class="icon" aria-hidden="true">
306 |   <use xlink:href="#icon-xxx"></use>
307 | </svg>
308 |
309 |
310 | 311 | 312 | -------------------------------------------------------------------------------- /static/font_demo/demo_unicode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 29 | 30 | 31 |
32 |

IconFont 图标

33 |
    34 | 35 |
  • 36 | 37 |
    all
    38 |
    &#xe696;
    39 |
    • 40 | 41 |
  • 42 | 43 |
    back
    44 |
    &#xe697;
    45 |
    • 46 | 47 |
  • 48 | 49 |
    close
    50 |
    &#xe69a;
    51 |
    • 52 | 53 |
  • 54 | 55 |
    delete
    56 |
    &#xe69d;
    57 |
    • 58 | 59 |
  • 60 | 61 |
    help
    62 |
    &#xe6a3;
    63 |
    • 64 | 65 |
  • 66 | 67 |
    more_unfold
    68 |
    &#xe6a6;
    69 |
    • 70 | 71 |
  • 72 | 73 |
    pic
    74 |
    &#xe6a8;
    75 |
    • 76 | 77 |
  • 78 | 79 |
    search
    80 |
    &#xe6ac;
    81 |
    • 82 | 83 |
  • 84 | 85 |
    set
    86 |
    &#xe6ae;
    87 |
    • 88 | 89 |
  • 90 | 91 |
    Smile
    92 |
    &#xe6af;
    93 |
    • 94 | 95 |
  • 96 | 97 |
    ViewGallery
    98 |
    &#xe6b4;
    99 |
    • 100 | 101 |
  • 102 | 103 |
    Viewlist
    104 |
    &#xe6b5;
    105 |
    • 106 | 107 |
  • 108 | 109 |
    close
    110 |
    &#xe619;
    111 |
    • 112 | 113 |
  • 114 | 115 |
    subtract
    116 |
    &#xe6fe;
    117 |
    • 118 | 119 |
  • 120 | 121 |
    personal-center
    122 |
    &#xe70b;
    123 |
    • 124 | 125 |
  • 126 | 127 |
    download
    128 |
    &#xe714;
    129 |
    • 130 | 131 |
  • 132 | 133 |
    map
    134 |
    &#xe715;
    135 |
    • 136 | 137 |
  • 138 | 139 |
    bad
    140 |
    &#xe716;
    141 |
    • 142 | 143 |
  • 144 | 145 |
    good
    146 |
    &#xe717;
    147 |
    • 148 | 149 |
  • 150 | 151 |
    音乐_music217
    152 |
    &#xe713;
    153 |
    • 154 | 155 |
  • 156 | 157 |
    home
    158 |
    &#xe60b;
    159 |
    • 160 | 161 |
  • 162 | 163 |
    search
    164 |
    &#xe61d;
    165 |
    • 166 | 167 |
  • 168 | 169 |
    音乐_music216
    170 |
    &#xe71e;
    171 |
    • 172 | 173 |
  • 174 | 175 |
    right
    176 |
    &#xe6c7;
    177 |
    • 178 | 179 |
  • 180 | 181 |
    hot
    182 |
    &#xe756;
    183 |
    • 184 | 185 |
  • 186 | 187 |
    add
    188 |
    &#xe63c;
    189 |
    • 190 | 191 |
  • 192 | 193 |
    speaker-6
    194 |
    &#xe66f;
    195 |
    • 196 | 197 |
  • 198 | 199 |
    speaker-5
    200 |
    &#xe670;
    201 |
    • 202 | 203 |
  • 204 | 205 |
    security
    206 |
    &#xe682;
    207 |
    • 208 | 209 |
  • 210 | 211 |
    Security
    212 |
    &#xe630;
    213 |
    • 214 | 215 |
  • 216 | 217 |
    scan
    218 |
    &#xe62b;
    219 |
    • 220 | 221 |
222 |

unicode引用

223 |
224 | 225 |

unicode是字体在网页端最原始的应用方式，特点是：

226 |
    227 |
  • 兼容性最好，支持ie6+，及所有现代浏览器。
    • 228 |
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 229 |
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • 230 |
231 |
232 |

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

233 |
234 |

unicode使用步骤如下：

235 |

第一步：拷贝项目下面生成的font-face

236 | 
@font-face {
237 |   font-family: 'iconfont';
238 |   src: url('iconfont.eot');
239 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
240 |   url('iconfont.woff') format('woff'),
241 |   url('iconfont.ttf') format('truetype'),
242 |   url('iconfont.svg#iconfont') format('svg');
243 | }
244 |
245 |

第二步：定义使用iconfont的样式

246 | 
.iconfont{
247 |   font-family:"iconfont" !important;
248 |   font-size:16px;font-style:normal;
249 |   -webkit-font-smoothing: antialiased;
250 |   -webkit-text-stroke-width: 0.2px;
251 |   -moz-osx-font-smoothing: grayscale;
252 | }
253 |
254 |

第三步：挑选相应图标并获取字体编码，应用于页面

255 | 
<i class="iconfont">&#x33;</i>
256 | 257 |
258 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

259 |
260 |
261 | 262 | 263 | 264 | 265 | -------------------------------------------------------------------------------- /static/font_demo/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1535082662696'); /* IE9*/ 4 | src: url('iconfont.eot?t=1535082662696#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), 6 | url('iconfont.ttf?t=1535082662696') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1535082662696#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-all:before { content: "\e696"; } 19 | 20 | .icon-back:before { content: "\e697"; } 21 | 22 | .icon-close1:before { content: "\e69a"; } 23 | 24 | .icon-delete:before { content: "\e69d"; } 25 | 26 | .icon-help:before { content: "\e6a3"; } 27 | 28 | .icon-moreunfold:before { content: "\e6a6"; } 29 | 30 | .icon-pic:before { content: "\e6a8"; } 31 | 32 | .icon-search:before { content: "\e6ac"; } 33 | 34 | .icon-set:before { content: "\e6ae"; } 35 | 36 | .icon-smile:before { content: "\e6af"; } 37 | 38 | .icon-viewgallery:before { content: "\e6b4"; } 39 | 40 | .icon-viewlist:before { content: "\e6b5"; } 41 | 42 | .icon-close:before { content: "\e619"; } 43 | 44 | .icon-subtract:before { content: "\e6fe"; } 45 | 46 | .icon-gerenzhongxin:before { content: "\e70b"; } 47 | 48 | .icon-icondownload:before { content: "\e714"; } 49 | 50 | .icon-map:before { content: "\e715"; } 51 | 52 | .icon-bad:before { content: "\e716"; } 53 | 54 | .icon-good:before { content: "\e717"; } 55 | 56 | .icon-yinlemusic217:before { content: "\e713"; } 57 | 58 | .icon-home:before { content: "\e60b"; } 59 | 60 | .icon-search1187938easyiconnet:before { content: "\e61d"; } 61 | 62 | .icon-yinlemusic216:before { content: "\e71e"; } 63 | 64 | .icon-right:before { content: "\e6c7"; } 65 | 66 | .icon-hot:before { content: "\e756"; } 67 | 68 | .icon-add:before { content: "\e63c"; } 69 | 70 | .icon-speaker-6:before { content: "\e66f"; } 71 | 72 | .icon-speaker-5:before { content: "\e670"; } 73 | 74 | .icon-yanzhengma:before { content: "\e682"; } 75 | 76 | .icon-Security:before { content: "\e630"; } 77 | 78 | .icon-icon-test:before { content: "\e62b"; } 79 | 80 | -------------------------------------------------------------------------------- /static/font_demo/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/purestart/vue-image-transform/8b6247df7c8d084e20137631d415fa4470e47241/static/font_demo/iconfont.eot -------------------------------------------------------------------------------- /static/font_demo/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/purestart/vue-image-transform/8b6247df7c8d084e20137631d415fa4470e47241/static/font_demo/iconfont.ttf -------------------------------------------------------------------------------- /static/font_demo/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/purestart/vue-image-transform/8b6247df7c8d084e20137631d415fa4470e47241/static/font_demo/iconfont.woff -------------------------------------------------------------------------------- /static/image/sofa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/purestart/vue-image-transform/8b6247df7c8d084e20137631d415fa4470e47241/static/image/sofa.png -------------------------------------------------------------------------------- /static/image/sticker1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/purestart/vue-image-transform/8b6247df7c8d084e20137631d415fa4470e47241/static/image/sticker1.png --------------------------------------------------------------------------------