js 转换图片方法

最新推荐文章于 2024-08-05 16:52:00 发布

ghost123cc

最新推荐文章于 2024-08-05 16:52:00 发布

阅读量788

点赞数 1

分类专栏：笔记文章标签： javascript js

本文链接：https://blog.csdn.net/affordlove/article/details/109657868

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

方法一 ： 使用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();
		}