編寫一個(gè)頭像裁剪組件（一）

whatsns 發(fā)布于2019-08-23 10:31 / 1983人閱讀

摘要：需求是編寫一個(gè)頭像剪裁工具再封裝成為一個(gè)組件，然后根據(jù)功能開始逐步編寫代碼先是上傳圖片預(yù)覽圖片編輯圖片。

需求是編寫一個(gè)頭像剪裁工具再封裝成為一個(gè)組件，然后根據(jù)功能開始逐步編寫代碼：先是上傳圖片 => 預(yù)覽圖片 => 編輯圖片。

剛開始沒有去考慮兼容性的問題，直接編寫upload部分的代碼，參考了很多代碼還有HTML5 FILE API之后，發(fā)現(xiàn)很少有React編寫的這樣的代碼，因?yàn)橄牒?jiǎn)單一點(diǎn)，所以直接就使用

let file = e.target.files[0];
let url = window.URL.createObjectURL(file);
console.info(url);

打印出來的結(jié)果是：

blob:http://localhost:3001/396d3dbb-be52-4fd4-aaf9-50c0c04ecef9

這個(gè)是個(gè)DOMString類型的返回值，根據(jù)MDN：

A DOMString containing an object URL that can be used to reference the contents of the specified source object.

然后我想使用canvas去加載這個(gè)文件再對(duì)這個(gè)文件做裁剪的操作，問題就來了，ctx.drawImage(img)不能直接去解析到這個(gè)DOMString再加載出來，后來網(wǎng)上發(fā)現(xiàn)確實(shí)要先轉(zhuǎn)化成dataURL才能被正常加載，然后就一直嘗試這樣的方案：

reader.readAsDataURL(file);

會(huì)報(bào)錯(cuò)：
Uncaught TypeError: Failed to execute "readAsDataURL" on "FileReader": parameter 1 is not of type "Blob

無法被FileReader.readAsDataURL()順利轉(zhuǎn)換，最后看了些stackoverflow上的方案，綜合了一下。
代碼如下：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component{
    constructor(props){
        super(props);

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e){
        console.info(url);

      if (window.FileReader){
          console.info("Support file reader");
          let file = e.target.files[0];
          let reader = new FileReader();
          let img = new Image();

          if(file && file.type.match("image.*")){
            reader.readAsDataURL(file);
          }else{
            console.info("Not match!")
          }

          reader.onload = e => {
            let ctx = this.canvas.getContext("2d");

            img.src = reader.result;
            ctx.drawImage(img,10,10);
          }

      }
   
    }

    render(){
        return 
            
            
    }
}

ReactDOM.render(,document.getElementById("root"));