javascript将图片转换为base64编码方法

公园里的草真绿啊,绿得让你感觉那是一块绿地毯;公园里的草真密啊,密得看不见泥土;公园里的草真柔啊,微风一吹,它们就翩翩起舞。

js可以将图片文件转成base64编码的,便于图片文件的上传与处理,下面就写几种关于js脚本来转换图片为base64编码的方法。

js将图片转换为base64编码的方法

方法1

将自身网站的图片转成base64编码格式,但需要注意的是,是不能处理远程图片的,会产生一个跨域的问题。

//转换图片为base64函数
function getBase64Image(img) {  
var canvas = document.createElement("canvas");  
canvas.width = img.width;  
canvas.height = 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);  
return dataURL;  
}  
var image = new Image();  
image.src = '图片路径';  
image.setAttribute("crossOrigin",'Anonymous')
image.onload = function(){  
var base64 = getBase64Image(image);  
console.log(base64);  
}

方法2:

前台通过file类型的input选择本地图片时,自动将本地选择的图片转成base64编码格式,下面的示例代码借助的jq插件,如果不想借助jq插件,可以自行修改一下。

<input type="file" name="" id="mochu" />
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script>
$('body').on('change','#mochu',function(){    
    var file = document.getElementById('mochu').files[0];
    var reader = new FileReader();
    reader.addEventListener("load", function () {
        console.log(reader.result);
    }, false);
    reader.readAsDataURL(file);
});

到此这篇关于javascript将图片转换为base64编码方法就介绍到这了。人生不售来回票,一旦动身,绝不能复返。更多相关javascript将图片转换为base64编码方法内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
JS获取鼠标点击时的位置

JS获取URL参数

Ajax跨域问题及解决方案(jsonp,cors)

ajax动态加载json数据并详细解析

ajax从JSP传递对象数组到后台的方法