zoukankan      html  css  js  c++  java
  • javascript:图片转base64

    第一种:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>base64</title>
    <style type="text/css">

    </style>
    </head>
    <body>
    <div>
    <input type="file" id="image">
    <input type="button" name="" value="点击" onclick='test()'>
    </div>

    <img src="" id="img1">

    <script type="text/javascript" src="javascript/jquery.min.js"></script>
    <script type="text/javascript" src="javascript/javascript.js"></script>
    </body>
    </html>


    function test(){

    var reader = new FileReader();
    var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)( 2 M = 2097152 B )超过2M上传失败
    var file = $("#image")[0].files[0];
    console.log(file)//这里可以查看file的类型和大小等
    var imgUrlBase64;
    if (file) {
    //将文件以Data URL形式读入页面,貌似并没有返回值
    imgUrlBase64 = reader.readAsDataURL(file);

    reader.onload = function (e) {//读取成功后的回调
    console.log(reader)
    var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分(可选可不选,需要与后台沟通)
    if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
    alert( '上传失败,请上传不大于2M的图片!');
    return;
    }else{
    //执行上传操作
    alert(reader.result);
    $("#img1").attr('src',reader.result);
    }
    }
    }

    }

    第二种:

    网站:http://www.jb51.net/article/128554.htm

    function getBase64(url){
    //通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染
    var Img = new Image(),
    dataURL='';
    Img.src=url;
    Img.onload=function(){ //要先确保图片完整获取到,这是个异步事件
    var canvas = document.createElement("canvas"), //创建canvas元素
    width=Img.width, //确保canvas的尺寸和图片一样
    height=Img.height;
    canvas.width=width;
    canvas.height=height;
    canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
    dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL
    };
    }

  • 相关阅读:
    小程序 筛选
    Travel 项目环境配置
    ajax
    vue 项目编译打包
    自学网
    使用npm打包vue项目
    vue音乐播放器项目 二级路由跳转
    better-scroll (下拉刷新、上拉加载)
    Linux命令
    hibernate存储过程 3
  • 原文地址:https://www.cnblogs.com/llqwm/p/9144725.html
Copyright © 2011-2022 走看看