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

<body> <div> <p style=" font-size: 18px; font-weight: bold;">手动选择图片生成base64编码</p> <input type="file" id="myfileinput" onchange="change()" multiple> </div>



将已展示的图片生成base64








随便给一个图片路径转成base64











</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  阅读(171)  评论(0)    收藏  举报