码迷,mamicode.com
首页 > 其他好文 > 详细

编写一个头像裁剪组件(一)

时间:2020-04-25 23:21:40      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:url   api   over   error:   nta   win   组件   返回   exe   

需求是编写一个头像剪裁工具再封装成为一个组件,然后根据功能开始逐步编写代码:先是上传图片 => 预览图片 => 编辑图片。

刚开始没有去考虑兼容性的问题,直接编写upload部分的代码,参考了很多代码还有HTML5 FILE API之后,发现很少有React编写的这样的代码,因为想简单一点,所以直接就使用


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

打印出来的结果是:

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

这个是个DOMString类型的返回值,根据MDN:

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

然后我想使用canvas去加载这个文件再对这个文件做裁剪的操作,问题就来了,ctx.drawImage(img)不能直接去解析到这个DOMString再加载出来,后来网上发现确实要先转化成dataURL才能被正常加载,然后就一直尝试这样的方案:

reader.readAsDataURL(file);

会报错:
Uncaught TypeError: Failed to execute ‘readAsDataURL‘ on ‘FileReader‘: parameter 1 is not of type ‘Blob

无法被FileReader.readAsDataURL()顺利转换,最后看了些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 <div>
            <input type="file" multiple onChange={this.handleChange}/>
            <canvas width="500px" 
                    height="500px"
                    style={{border:"solid 1px lightgrey"}}
                    ref={canvas=>this.canvas = canvas}/>
        </div>
    }
}

ReactDOM.render(<App/>,document.getElementById(‘root‘));

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hbhahac21ab

编写一个头像裁剪组件(一)

标签:url   api   over   error:   nta   win   组件   返回   exe   

原文地址:https://www.cnblogs.com/10manongit/p/12775975.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!