前端 利用canvas处理图片

1.input的change事件可以拿到event.target.files

2.读取文件

let reader = new FileReader();reader.readAsDataURL(img);

3.在reader.onload里面可以拿到e.target.result

4.读取图片

let image = new Image(); image.src = e.target.result;

5.在image.onload里面可以设置canvas

this.context.drawImage(image, 0, 0, this.imageWidth, this.imageHeight);

6.获取canvas的图片算相似度

let imageData = this.context.getImageData(0, 0, this.imageWidth, this.imageHeight);

7.canvas转base64

this.canvasSrc = this.canvas.toDataURL("image/png");

8.base64转png