COLOR THIEF读取图片色彩信息

预览测试地址Color Thief是一个读取图像色彩的库，它的实现方式是把图像转换为canvas标签，并通过JavaScript来计算每一个像素点的颜色值来输出结果。Github本演示无后端通信，文件在本地处理不向后端发送数据。一、安装 COLOR THIEFnpm install color-thief二、在具体模块中引入 COLOR THIEF因为我安装的是非官方版本的库，所以引入的来源不一样，请根据安装的库版本修改来源import ColorThief from '@codemotion/color-thief'三、HTML<input id="ifile" type="file" style="display:none" accept="image/*" @change="onUpload">四、JS（onUpload方法）onUpload(e) { // 获取file类型数据 var file = e.target.files[0]; /

技能 · 2022-05-18 · 1112 人浏览
COLOR THIEF读取图片色彩信息

VueJS前端多语言国际化

通常在开发大型项目或国际项目的时候，我们都需要增加国际化模块，使网站可以显示多语言。我的思路是，每个语言分不同的文件，检测用户语言环境或通过用户设置来判断调用哪个语言文件，而在开发中程序员又能清楚到底是什么意思。由于我们不需要兼容IE，所以只使用navigator.language来获取用户语言。第一步：我们需要有个入口文件新建一个languge.js文件，这个文件主要功能为：获取Cookie中是否存在lang值，如果不存在则检测用户语言环境，并获取语言编码储存到Cookie，之后再调用相应的语言文件输出。// 引入js-cookie import Cookies from 'js-cookie' // 获取cookie中lang值 var lang = Cookies.get('lang'); // 如果lang值不存在则设置lang值（第一次访问） if (!lang) { // 如果用户语言环境为zh-CN则设置lang值为zh，并储存到cookie中 if (navigator.language == 'zh-CN') { lang = 'zh'

技能 · 2022-01-08 · 1014 人浏览
VueJS前端多语言国际化

JS禁止手机端全局触摸并允许局部触摸

在开发移动网页端的时候，总会遇到手机浏览器适配混乱，滚动条屡禁不止，以下提出一种解决方案——通过禁用全局触摸并允许局部触摸达到禁止效果。第一步：如果使用Vue开发，可以在Public/index.html入口处添加该代码，如果未使用框架，可单独创建Config文件进行全局引入。document.body.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false });第二步：允许局部块触摸（使用ID获取的节点是一维数组。使用ClassName获取的节点是二维数组）var div = document.getElementsByClassName("divclassname"); div = div[0]; div.ontouchmove = function (ev) { ev.stopPropagation(); };注：有个小Bug，在IOS系统下，触摸局部有几率会让地址栏收回导致布局出现变动，并导致全局滚动条出现，做好UI的适配可解决布局

技能 · 2021-06-20 · 1234 人浏览
JS禁止手机端全局触摸并允许局部触摸

安装好nodejs和vuejs后找不到命令

全局安装nodejs和vuejs后，当时可以使用全局命令，但是重启后就找不到了可以通过全局软连接的方式来使用nodeJssudo ln -s /root/node-v12.18.3-linux-x64/bin/node /usr/local/bin/ NPMsudo ln -s /root/node-v12.18.3-linux-x64/bin/npm /usr/local/bin/ vueJssudo ln -s /root/node-v12.18.3-linux-x64/bin/vue /usr/local/bin/

技能 · 2020-09-15 · 723 人浏览
安装好nodejs和vuejs后找不到命令
2013 - 2024 DIMM. All Rights Reserved.
Theme Jasmine by Kent Liao