JS上传头像代码示例

从手机相册上传头像和手机拍照上传头像时，图片过大，导致头像更新过慢的问题

js, upload, avatar

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1333
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var oInput = document.getElementById("input");
oInput.addEventListener("change", uploadImg);

function uploadImg(e) {
    let $target = e.target || e.srcElement;
    let file = $target.files[0];
    if (!/image\/\w+/.test(file.type)) {
        alert("image only please.");
        return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) {
        var img = new Image,
            width = 640, //image resize
            canvas = document.createElement("canvas"),
            drawer = canvas.getContext("2d");
        img.src = this.result;
        img.onload = function() {
            canvas.width = width;
            canvas.height = width * (img.height / img.width);
            drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
            temp_avatar = canvas.toDataURL("image/jpeg"); //上传的头像文件  包含data URL 的DOMString。
            console.log(temp_avatar);

var temp_file = dataURLtoFile(temp_avatar, 'avatar.png'); //data RUL转成file进行判断大小
            var size = temp_file.size;
            if (size > 5 * 1024 * 1024) {
                setTimeout(function() {
                    console.log("图片过大");
                }, 1000);
                return;
            }
            console.log("OK"); //此处可以进行文件上传操作
        }
    }
}

编译

CSS

HTML

从手机相册上传头像和手机拍照上传头像时，图片过大，导致头像更新过慢的问题

js, upload, avatar

编辑器支持Emmet

快捷键

从手机相册上传头像和手机拍照上传头像时，图片过大，导致头像更新过慢的问题

js, upload, avatar

three.js添加场景背景和天空盒（skybox）代码示例3

D3.js 柱形图代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：