解决canvas在h5上绘制模糊问题

问题描述

最近h5项目有个绘制圆形进度条的需求，用原生canvas绘制后发现在手机上显示比较模糊，效果不是很好，于是查了一下资料发现在canvas context中也存在一个类似浏览器属性devicePixelRatio的属性，叫作webkitBackingStorePixelRatio，该属性的值决定了浏览器在渲染canvas之前会用几个像素来来存储画布信息，如果手机屏幕的devicePixelRatio值越高，就会导致canvas绘制的图案要用更多的像素去绘制，跟图片放大就会变得模糊类似，所以我们需要根据不同的屏幕渲染比缩放canvas绘制的大小，即改变canvas的宽度跟高度。

第一种解决方案

简单粗暴，直接使用github上的一个库即可hidpi-canvas-polyfill

1
2
3
4
...
<script src=".../dist/hidpi-canvas.min.js"></script>
<script src=".../your-canvas-stuff.js"></script>
...


更多 >>

展开全文 >>

promise简单实现

Promise含义

Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。

Promise特点

Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
更多 >>

展开全文 >>

vue移动端适配之rem解决方案

环境

  • vue-cli3.0
  • vue2.x

安装postcss-px2rem-exclude: (将px自动转为rem)

1
yarn add postcss-px2rem-exclude

在根目录的postcss.config.js添加如下代码：（如果没有则自己新建一个）

1
2
3
4
5
6
7
8
9
module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75,                            // 设计图的十分之一宽度，我这里是750px的设计图，所以设置为75
      exclude: /node_modules|folder_name/i    // 忽略node_modules内的第三方ui库，防止样式出现问题
    }
  }
};

更多 >>

展开全文 >>

linux上nginx配置端口8000无法公网访问

前言

最近遇到一个问题，在CentOS上搭建一个nginx服务器时出现本地可以访问8000端口而公网访问不了，最后发现是防火墙和阿里云上安全组配置问题，记录一下解决方法，希望能帮到遇到相同问题的人。

解决方式

1.确保nginx配置没有问题

1
2
3
4
5
6
7
8
9
server{
    listen 8000;
    server_name _;
    root /var/www/vue_toast_example.github.io;
    location / {
        index index.html index.htm index.php;
        #autoindex on;
    }
}

2.在本地通过内网测试发现可以访问而在公网却访问不了

1
$ curl 127.0.0.1:8000
更多 >>

展开全文 >>

初探webpack

什么是webpack？

官网的概念为：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle。
看起来是不是比较难理解，实际上我们可以理解为，Webpack就是一个静态资源打包工具，可以把JS及其所依赖的css和图片(都认为是一个模块)打包为一个.js文件，让客户端浏览器只引入最终的js文件，从而实现减少HTTP请求的目的，优化访问速度！


更多 >>

展开全文 >>

javascript-函数防抖

什么是函数防抖

函数防抖是频繁发生的情况下，只会执行代码一次，是优化高频率执行代码的一种手段。实际开发中可能会遇到n秒内只能触发一次事件或者是无论触发多少次都等到最后一次触发n秒后才执行。

实现n秒内只能执行一次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
  <button id="container">点击</button>
  <script>
    var count = 0;
    var btn = document.querySelector('#container');
    //防抖函数
    function debounce(delay) {
        var timer = false;

        return function() {
          if (!timer) {
            
            timer = true;
            // 具体要执行的动作
            console.log('执行')

            setTimeout(function() {
              timer = false;
            }, delay)
          }else {
            alert('操作过于频繁')
          }
        }
    }

    btn.onclick = debounce(3000);
  </script>
</body>
更多 >>

展开全文 >>

如何使用canvas压缩图片

为什么需要压缩？

我们在项目中有时候会遇到需要用户上传身份证照或者头像照片，而现在市面上的手机像素普遍都很高，拍出来的照片普遍都有3MB以上甚至更大，如果同时上传几张图片就会导致页面卡住，所以我们需要对上传的图片进行压缩，下面就让我给大家讲一下如何使用canvas压缩图片。

FileReader

首先向大家介绍一下FileReader，FileReader是HTML5用来读取文件的API，可以将上传的文件读取为 DataURL。
使用也非常简单，按照以下步骤就可以调用其方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
html:
  <input type="file" id="uploadFile" name="uploadFile" onchange="getFileInfo()">

js:
function getFileInfo() {
  var files = document.getElementById('uploadFile').files,
      reader = new FileReader();

  reader.onload = function(e) {
    console.log(e.target.result);
  }

  reader.readAsDataURL(files[0])
}

这里的 e.target.result 就是上传文件的baseURL了
更多 >>

展开全文 >>

javascript-声明提前

什么是声明提前

javascript声明的变量和函数在所在的作用域始终是可见的，意味着变量在声明之前就可以被使用，这个特性就称的“声明提前”。

声明提前

先来一个简单的例子：

1
2
3
console.log(a);        
var a = 123;
console.log(a);

编译器运行的结果分别是：undefined 123
这里为什么会是“undefined”而不是报出“a is not defined”的错误呢，原因就是因为javascript的声明提前，编译器在运行之前先将所有var的变量提升到最上面，但是变量对应的赋值不会跟着提升，相当于变成了：
更多 >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家