Open JesseZhao1990 opened 6 years ago
javascript原生的api本来就支持,Base64,但是由于之前的javascript局限性,导致Base64基本中看不中用。当前html5标准正式化之际,Base64将有较大的转型空间,对于Html5 Api中出现的如FileReader Api, 拖拽上传,甚至是Canvas,Video截图都可以实现。
这两个函数的作用就是可以使用btoa和atob来进行Base64转码和解码
let str = 'jessezhao';
console.log(window.btoa(str)); // amVzc2V6aGFv
console.log(window.atob('amVzc2V6aGFv')) // jessezhao
charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。 方法 charCodeAt() 与 charAt() 方法执行的操作相似,只不过前者返回的是位于指定位置的字符的编码,而后者返回的是字符子串。
const str="Hello world!"
console.log(str.charCodeAt(1)) //101
drawImage() 方法接收一个图片或者视频,然后将接收到的图片或者视频在画布上绘制出来。 此方法也能够绘制图像的某些部分(裁剪图片),以及/或者增加或减少图像的尺寸(压缩图片)。
在画布上定位图像:
context.drawImage(img,x,y);
在画布上定位图像,并规定图像的宽度和高度:
context.drawImage(img,x,y,width,height);
剪切图像,并在画布上定位被剪切的部分:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数 | 描述 |
---|---|
img | 规定要使用的图像、画布或视频 |
sx | 可选。开始剪切的 x 坐标位置。 |
sy | 可选。开始剪切的 y 坐标位置。 |
sheight | 可选。被剪切图像的宽度。 |
swidth | 可选。被剪切图像的高度。 |
x | 在画布上放置图像的 x 坐标位置。 |
y | 在画布上放置图像的 y 坐标位置。 |
width | 可选。要使用的图像的宽度。(伸展或缩小图像) |
height | 可选。要使用的图像的高度。(伸展或缩小图像) |
文档参见:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
需求源
通过canvas截图,截到的是一个base64编码的图片,如果后端不处理base64编码的图片的情况下,前端需要自行转成file对象,上传到图片服务器
步骤
1.裁切图片
通过canvas的drawImage()方法,可以将图片的某一部分绘制(裁切)到画布中,然后利用canvas的toDataURL()方法,可以将画布中的图片导出base64编码的图片。
2.将base64的图片转为Blod对象
3.上传
由于file对象是继承的Blob对象,只是在Blob对象的基础上多了文件的大小名字等属性,所以,可直接上传Blob对象