- 博客(27)
- 收藏
- 关注
RSS订阅原创 前端实现HTML转PDF
主要通过html2canvas和jspdf两个插件实现通过html2canvas将HTML页面转换成图片，然后再将图片转换成base64，通过jspdf生成pdf文件1、安装插件npm install html2canvas jspdf --save2、写实现方法import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export default (elementId, fileName) => { if (!e
2022-01-13 20:23:18
2337
原创 Canvas高质量缩小
由于问题是缩小图像的大小，因此在讨论插值时没有意义，这是关于创建像素的。这里的问题是缩减采样。为了对图像进行下采样，我们需要将原始图像中每个p * p像素的平方转换为目标图像中的单个像素。由于性能的原因，浏览器做了一个非常简单的向下采样：为了构建较小的图像，他们将只选择源中的一个像素，并将其值用于目标。这会“忘记”一些细节并增加噪音。但是有一个例外：由于2X图像下采样的计算非常简单（平均4个像素来制作），并且用于视网膜/ HiDPI像素，因此这种情况可以正确处理 - 浏览器确实使用4个像素来制作一-。
2021-11-19 11:32:33
2119
原创 使用qiankun微前端库的时候，子应用字体图标无法显示问题，及解决方式
问题：使用qiankun微前端库的时候，加载的子应用使用了element-ui的字体图标，子应用在独立运行时，字体图标可以正常显示，而在被父应用加载时，字体图标显示不出来。解决方式：配置字体图标打包方式使用url_loader，打包为base64config.module .rule("fonts") .test(/.(ttf|otf|eot|woff|woff2)$/) .use("url-loader") .loader("url-loader") .tap(options =
2021-11-06 14:37:47
4612
3
原创 js获取图片像素颜色，修改图片像素颜色
直接上代码示例<!DOCTYPE HTML PUBLIC><html> <head> <meta charset="utf-8"> <title>获取图片像素颜色，修改图片像素颜色</title> <style type="text/css"> body { margin: 0px; background: #f2f2f0; } #img-box {斜体样式 p
2021-10-25 14:45:41
4393
3
原创 js通过canvas进行图片压缩
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <input id="input" type="file" val
2021-05-13 21:48:58
267
原创 vue.config.js配置gzip文件压缩，图片压缩
const path = require('path');const CompressionWebpackPlugin = require('compression-webpack-plugin')const compress = new CompressionWebpackPlugin({ filename: info => { return `${info.path}.gz${info.query}` }, algorithm: 'gzip', threshold: 10240,
2021-05-13 16:20:59
1414
原创 前端性能测试(H5性能测试)
前端性能测试(H5性能测试)：https://www.cnblogs.com/wendyw/p/12443529.html#_label3在线分析网站响应速度 PageSpeed Insights：https://developers.google.com/speed/pagespeed/insights/
2021-05-12 15:30:21
416
原创 前端js计算抽奖概率
很好用的js计算抽奖概率的公式let weightList = [20, 8, 30, 50, 80, 10] // 权重数组weightList = [...weightList, 0, 0]let total = 0weightList.forEach((item: any) => { total += item})let random: any = Math.random() * totallet result = 0for (let i = 0, len = weigh
2021-04-10 20:14:44
2235
原创 如何定位前端线上问题（如何排查前端生产问题）
引用自：https://www.cnblogs.com/warm-stranger/p/10430346.html
2021-03-09 14:51:05
997
原创 iView采用组件按需引入时，部分组件报错问题
最近在项目中使用iView组件按需引入时，部分组件引入后会报错，官方文档在按需引入时也没有说明，现在将解决方式记录下来，希望对遇到同样问题的童鞋有帮助。问题：通过报错信息可以看到，是 ‘node_modules/_view-design@4.5.0@view-design/src/directives/v-click-outside-x.js’ 这个文件解析失败，需要使用加载器来处理，所以我们就知道应该怎样解决了。解决方式：在webpack配置一下，使用babel-loader来处理：...
2021-03-01 15:28:04
832
1
原创 webpack配置接口地址代理
前言在实际项目中，本地开发环境请求服务器接口的时候，存在跨域问题，解决跨域问题有两种方式：1、关闭浏览器跨域限制2、使用webpack-dev-server的proxy代理第一种方式，前面有文章介绍过：各浏览器开启跨域模式现在说明第二种方式：1、在webpack.config.js中配置devServer: { ... proxy: { '/service-core': { target: 'https://test.******.org',
2021-02-18 16:21:36
1278
原创 git官网下载太慢解决方法
使用淘宝镜像下载https://npm.taobao.org/mirrors/git-for-windows/选择版本进入后，选择要的版本。
2021-01-16 00:04:48
544
原创 使用webpack.ProvidePlugin配置全局api
在使用vue开发过程中，基本每个组件都需要import引入api接口，用webpack配置ProvidePlugin后，将不用再引入api，直接使用就可以。配置方法：1、 在webpack.dev.conf.js和webpack.prod.conf.js中添加 plugins: [ ... new webpack.ProvidePlugin({ 'api': 'api' }) ... ]2、 在webpack.base.conf.js中添加resolve: { extensi
2021-01-05 14:21:10
754
原创 忽略Eslint不需要检查的代码
在使用eslint进行代码格式检查的时候，有时候一些代码不需要检查，这时候就需要对不需要检查的代码单独处理1、如果只是对一行代码处理，在需要忽略的代码前加一行注释：// eslint-disable-next-line2、如果是对一段代码忽略，在代码前加：/* eslint-disable */3、如果对全局变量忽略，显然加注释的方法有些繁琐，解决方法：找到.eslintrc.js,添加 "globals": { "你的全局变量": null }...
2021-01-05 14:20:06
1788
原创 前端将pdf文件转成canvas
从服务器请求pdf文件转成canvas进行前端展示最近做一个vue项目，需要将pdf文件在页面展示，由于踩了两个坑，所以记录一下，共大家参考。开始我用的是vue-pdf插件，但是遇到一个问题，不显示pdf上面的印章？？？，所以自己下载pdf.js和pdf.worker.js,然后修改了一行代码，再进行压缩引入。下面是将这个功能封装的一个组件：/** * @param {string} fileUrl 文件地址 */<template> <div ref="parent"&g
2020-12-30 16:57:33
2033
原创 指针指向，及堆内存的理解
先看一段代码let a = { n: 1};let b = a;a.x = a = {n: 2};console.log(a.x);console.log(b);//undefined//{// n: 1,// x: {// n: 2// }//}一张图辅助理解输出的结果
2020-12-21 16:37:55
194
原创 各浏览器开启跨域模式
google浏览器开启跨域模式命令：open -a Google\ Chrome --args --disable-web-security --user-data-diropen -a “/Applications/Google Chrome.app” --args --disable-web-security --user-data-dir=/Users/yourname/chromeDevUserData/
2020-12-07 16:59:22
1179
原创 js下载单个文件至本地
获取后端返回的文件流下载文件至本地function downloadFile (fileUrl) { const xhr = new XMLHttpRequest(); xhr.open("get", fileUrl, true); xhr.responseType = "blob"; //注意将返回的数据类型设置为blob xhr.send(); xhr.onload = function () { let blob = this.response; let url = window
2020-11-04 17:52:09
243
原创 js将url转换二维码
使用二维码生成库 qrcode.js生成二维码什么是 QRCode.js？QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"/> <script type="text/ja
2020-11-04 17:17:11
3002
原创 base64、Blob、ArrayBuffer、File之间的转换
base64转Blobconst dataURLtoBlob = (dataurl) => { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charC
2020-11-03 18:16:13
1610
原创 前端将pdf文件转成canvas预览
将服务器请求回来的pdf转成canvas进行前端展示这篇文章主要介绍了js 通过ajax请求,将pfd转为canvas展示，现在分享给大家，也给大家做个参考。直接上代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scal
2020-11-03 13:17:36
3367
3
原创 echars饼图，解决文字重叠
echars饼图，解决文字重叠如图：下面再来说下我的解决方案：第一步：调整文字的显示大小，手机上文字可以更小，这里我用的是8px字号第二步：设置最小扇区角度，minAngle（最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互）第三步：avoidLabelOverlap（是否启用防止标签重叠策略，默认默认开启）第四步：文字换行展示，echarts给我们提供了一个...
2019-08-29 10:23:18
3479
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人