编写一个头像裁剪组件（一）

whatsns 发布于2019-08-23 10:31 / 1940人阅读

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

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

刚开始没有去考虑兼容性的问题，直接编写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 
            
            
    }
}

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

云服务器 GPU云服务器 jQuery头像裁剪导出数据编写一个方法简单编写一个html 怎样编写一个小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96427.html

vue-avatar-tailor，vue头像裁剪组件

摘要：实现原理简单，纯技术处理图片，几乎不需要用到相关知识面向人群急于使用头像裁剪组件的同学。裁剪框初始宽高上传图片后，裁剪区将预设为最大裁剪范围。支持矩形裁剪目前九宫仅支持将图片裁剪为正方形，不能裁剪为矩形，该功能将在后续优化。项目简介本组件是vue下的头像裁剪组件，可以直接拷贝代码使用，无需安装依赖使用九宫格进行裁剪，自由选择裁剪区域。实时预览裁剪后效果。可以将裁剪好的图片，...

imccl 2019-08-23 12:13 评论0 收藏0
腾讯 AlloyTeam 移动 Web 裁剪组件 AlloyCrop 正式开源

摘要：兼容性如何支持以及的设备的浏览器便可运行不一一列举一共不到行为什么体积这么小腾讯手内大量的都会去不断地从各个维度进行性能优化。腾讯内部有哪些项目在用目前主要是兴趣部落群等业务在用，刚刚开源出来，只要有裁剪图片的地方都会用到。传送门 Github地址：https://github.com/AlloyTeam/AlloyFinger/tree/master/alloy_crop 在线De...

yexiaobai 2019-08-20 12:21 评论0 收藏0
在Laravel项目中实现Ajax上传用户头像

摘要：在编写程序的过程中，经常会遇到一个经典的文件上传场景上传头像图片。基于对最好的用户体验的追求，写一下之前在项目中实现在项目中的上传头像。在编写web程序的过程中，经常会遇到一个经典的文件上传场景：上传头像（图片）。基于对最好的用户体验的追求，写一下之前在项目中实现在Laravel项目中的Ajax上传头像。 1.配置路由在Laravel的routes.php中设置路由： Rou...

shiina 2019-06-27 11:20 评论0 收藏0
记录微信小程序的坑

摘要：除官方外的参考文章微信小程序实例创建下发模板消息实例手把手教你开发微信小程序之模版消息开发教你突破小程序模板消息的推送限制获取用户信息接口的废弃问题接口是获取用户信息昵称，头像等的接口，在官方文档上写是即将废弃。 ----------------更新-------------- 2018年10月10日官网3个接口废弃的通知： 1、分享监听接口分享消息给好友时，开发者将无法从callba...

EastWoodYang 2019-08-23 12:02 评论0 收藏0