不同场景将图片转换为base64格式

<body> <div> <p style=" font-size: 18px; font-weight: bold;">手动选择图片生成base64编码</p> <input type="file" id="myfileinput" onchange="change()" multiple> </div> 
<div style="margin-top:20px;overflow: hidden;">
    <p style="    font-size: 18px;
    font-weight: bold;">
        将已展示的图片生成base64
    </p>
    <img id="jpg" src="./img/404.png" alt="" style="width: 200px;height: 200px;">
    <div>
        <button style="font-size: 20px;" onClick="trans()">点击生成</button>
    </div>
</div>

<div style="margin-bottom:20px;margin-top:20px;overflow: hidden;">
    <p style="font-size: 18px;
    font-weight: bold;">
        随便给一个图片路径转成base64

    </p>
    <div>
        <input id="urlImg" type="text" placeholder="输入图片地址">
        <button style="margin-top: 15px;font-size: 20px;" onClick="autoTrans()">点击生成</button>
    </div>
</div>
<div>
    <textarea id="base64" style="width: 500px;height: 500px;word-wrap: break-word;"
        placeholder="base64编码"></textarea>
</div>

<div style="margin: 30px;">
    <button style="font-size: 30px;" onCLick="preview()">点击预览</button>
</div>
</body> 
// 调用方法
function change() {
    let fileInput = document.getElementById("myfileinput");
    // files 是一个 FileList 对象(类似于NodeList对象)
    let files = fileInput.files;  // 获取上传的文件对象
    let imgobj = new Image();
    let url = window.URL || window.webkitURL;
    imgobj.src = url.createObjectURL(files[0]);// 这里传的是File对象

    let imgBaseStr = undefined;
    // img.onload 实现图片预加载方法
    imgobj.onload = function () {
        // 进行转码
        imgBaseStr = getBase64Image(this)
        $('#base64').val(imgBaseStr)
    }
}
// 将图片转 base64
function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    console.log(img.width, img.height)
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
    var dataURL = canvas.toDataURL("image/" + ext);
    // document.body.appendChild(canvas)
    return dataURL;
}


function trans() {
    var dom = $('#jpg')[0]
    var str = getBase64Image(dom)
    $('#base64').val(str)
}
function autoTrans() {
    var val = $('#urlImg').val()
    if (!val) {
        alert('请先输入图片url')
        return
    }
    let imgobj = new Image();
    let imgBaseStr = undefined;
    imgobj.setAttribute('crossOrigin', 'Anonymous');  //设置img对象允许跨域
    imgobj.src = val
    imgobj.onload = function () {
        imgBaseStr = getBase64Image(this)
        $('#base64').val(imgBaseStr)
    }
}

function preview() {
    var val = $('#base64').val()
    if (!val) {
        alert('请先生成base64格式编码')
        return
    }
    let img = new Image();
    img.src = val
    var dom = document.createElement('div')
    dom.appendChild(img)
    document.body.appendChild(dom)
}
posted @ 2021-04-13 12:47  yuanhonglin  阅读(156)  评论(0)    收藏  举报