图片转换为base64 位的三种方法

最新推荐文章于 2023-12-21 15:55:37 发布

chenshi6147

最新推荐文章于 2023-12-21 15:55:37 发布

阅读量2.6k

点赞数

文章标签： javascript json ViewUI

原文链接：https://my.oschina.net/u/227828/blog/907772

版权

方法一：使用H5 canvas 进行转换 /** * 图片转换 * var imgPath='templates/img/user.png'; */ this.GetBase64FromImageUrl=function(Url) { var dataURL=""; var image = new Image(); image.crossOrigin = 'anonymous'; //这里是设置跨域的 image.src = Url; image.onload =function(){ var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; var ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0, image.width, image.height); var ext = image.src.substring(image.src.lastIndexOf(".")+1).toLowerCase(); dataURL = canvas.toDataURL("image/png"); return dataURL; } }

方法二：使用Jquery 进行转换

<!DOCTYPE html>  
<html>  
<head>  
    <meta name="viewport" content="width=device-width" />  
    <title>jquery 图片base64</title>  
    <script type='text/javascript' src="jquery.js"></script>  
</head>  
<body>  
    <div id="testPhone" class="weui_uploader_input_wrp" style="width:79px; height:79px;">  
    </div>  
    <input id="testFile" type="file">  
    <hr>  
    <img id="testImg" src="C:\Users\Public\Pictures\Sample Pictures\菊花.jpg" style="max-height: 300px; height: 8em; min-width:8em;">  
    <hr>  
    <textarea id="testArea" style="display: block; width: 100%;height: 30em;"></textarea>  
    <input id="btnTest" type="button" value="提交base" />  
    <script>  
        $("#testPhone").click(function () {  
            $("#testFile").click();  
        });  
 
        $("#testFile").change(function () {  
            run(this, function (data) {  
                $('#testImg').attr('src', data);  
                $('#testArea').val(data);  
            });  
        });  

		 $("#testFile").click(function () {  
             
        });  
 
        $("#btnTest").click(function () {  
            $.ajax({  
                url: "/usercenter/testbaseaction",  
                type: "post",  
                dataType: "json",  
                data: {  
                    "content": $("#testArea").val(),  
                },  
                async: false,  
                success: function (result) {  
                    if (result.Code == 200) {  
                        alert(result.Data);  
                    } else {  
                    }  
                }  
            });  
        });  
 
        function run(input_file, get_data) {  
            /*input_file：文件按钮对象*/  
            /*get_data: 转换成功后执行的方法*/  
            if (typeof (FileReader) === 'undefined') {  
                alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");  
            } else {  
                try {  
                    /*图片转Base64 核心代码*/  
                    var file = input_file.files[0];  
                    //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件  
                    if (!/image\/\w+/.test(file.type)) {  
                        alert("请确保文件为图像类型");  
                        return false;  
                    }  
                    var reader = new FileReader();  
                    reader.onload = function () {  
                        get_data(this.result);  
                    }  
                    reader.readAsDataURL(file);  
                } catch (e) {  
                    alert('图片转Base64出错啦！' + e.toString())  
                }  
            }  
        }  
    </script>  
</body>  
</html>

方法三：使用XMLHttpRequest 方法：

$scope.toDataUrl=function (url, callback) {
		  var xhr = new XMLHttpRequest();
		  xhr.onload = function() {
			var reader = new FileReader();
			reader.onloadend = function() {
			  callback(reader.result);
			}
			reader.readAsDataURL(xhr.response);
		  };
		  xhr.open('GET', url);
		  xhr.responseType = 'blob';
		  xhr.send();
		}

转载于:https://my.oschina.net/u/227828/blog/907772

chenshi6147

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
图片转换为base64 位的三种方法

方法一：使用H5 canvas 进行转换/*** 图片转换* var imgPath='templates/img/user.png';*/this.GetBase64FromImageUrl=function(Url) {var dataURL="";var image...
复制链接

扫一扫