携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情
前言：
前一篇主要篇幅是分享自己是怎么样实现文件上传的功能的过程，概括的说就是从部署node.js服务器以及具体文件上传的方式两方面。而这一篇主要是为了分享一下自己是如何对canvas转化为浓缩图处理的。废话不多说，咋们进入正文。
一、canvas转图片
这个功能实现起来并不难，大家百度一下基本可以看懂并实现，所有这里就不过多叙述了。 重点代码：
// canvas的Dom节点
const canvas = canvasdom;
// console.log(canvas)
const context = canvas.getContext('2d')
const img = new Image()
// 将canvas转换成base64的url
var url = canvas.toDataURL('jpg');
var arr = url.split(','),
mime = arr[0].match(/:(.*?);/)[1], // 此处得到的是文件类型
bstr = atob(arr[1]), // 将base64解码
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
// 通过以下方式将以上变量生成文件对象，三个参数分别为文件内容、文件名、文件类型(此处指定为jpeg格式)
var file = new File([u8arr],'filename',{type:"image/jpeg"})
实现效果：
二、图片上传以及进行浓缩图转化处理
重点步骤如下：
1. 参考第二篇，为“上传图片”按钮绑定实现图片上传至七牛云的相关函数
2. 点击按钮，把canvas转换为图片并上传
点击按钮前：
点击按钮后：
查看云空间，图片已经上传成功：
3. 对云空间的图片进行浓缩处理
具体配置参数如下 想了解可参考官方文档：developer.qiniu.com/dora/api/ba…
imageView2/<mode>/w/<LongEdge>
/h/<ShortEdge>
/format/<Format>
/interlace/<Interlace>
/q/<Quality>
/colors/<colors>
/ignore-error/<ignoreError>
浓缩图处理方法有两种方式 一种是在图片上传的函数里再调用七牛的imageMogr2方法
1. const imgLink = qiniu.imageMogr2({
1. "auto-orient": true, // 布尔值，是否根据原图EXIF信息自动旋正，便于后续处理，建议放在首位。
1. strip: true, // 布尔值，是否去除图片中的元信息
1. thumbnail: '1000x1000' // 缩放操作参数
1. crop: '!300x400a10a10', // 裁剪操作参数
1. gravity: 'NorthWest', // 裁剪锚点参数
1. quality: 40, // 图片质量，取值范围1-100
1. rotate: 20, // 旋转角度，取值范围1-360，缺省为不旋转。
1. format: 'png', // 新图的输出格式，取值范围：jpg，gif，png，webp等
1. blur: '3x5' // 高斯模糊参数
1. }, key, domain)
另一种是七牛云空间可操作界面的方法（效果如下）
4.最后只需在图片外链地址上加入?和上图处理代码里的内容即可实现效果
总结
不知不觉，三篇文章已经写完了，主要是为了记录一下自己完成CDN的整个历程，加深自己的理解。如有错误，敬请各位指正。
最后，补上官方图片基本处理文档：developer.qiniu.com/dora/api/ba…
