javascript从image转换为String

最新推荐文章于 2024-04-26 16:47:03 发布

Lee_山

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1k

点赞数

分类专栏： javascript android 文章标签： base64 javascript image转换 byte webview交互

本文链接：https://blog.csdn.net/mmbhs/article/details/38228475

版权

android 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

最近需要把app的微信分享方法开放给webview，涉及到分享的图片，如果通过传送图片连接，那将要在后台再取一次图片文件，会影响速度，我选择webview把image以base64位编码的方式传给本地应用。下面是实现的参考代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Image to Base64 - jsFiddle demo by handtrix</title>
  
  <script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
  
  
  
  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type='text/css'>
    @import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');

body{
    padding: 20px;
}
  </style>
  


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
/**
 * convertImgToBase64
 * @param  {String}   url
 * @param  {Function} callback
 * @param  {String}   [outputFormat='image/png']
 * @author HaNdTriX
 * @example
	convertImgToBase64('http://goo.gl/AOxHAL', function(base64Img){
		console.log('IMAGE:',base64Img);
	})
 */
function convertImgToBase64(url, callback, outputFormat){
	var canvas = document.createElement('CANVAS');
	var ctx = canvas.getContext('2d');
	var img = new Image;
	img.crossOrigin = 'Anonymous';
	img.onload = function(){
		canvas.height = img.height;
		canvas.width = img.width;
	  	ctx.drawImage(img,0,0);
	  	var dataURL = canvas.toDataURL(outputFormat || 'image/png');
	  	callback.call(this, dataURL);
        // Clean up
	  	canvas = null; 
	};
	img.src = url;
}


$('#img2b64').submit(function(event){
    var imageUrl = $(this).find('input[name=url]').val();
    console.log('imageUrl', imageUrl);
    convertImgToBase64(imageUrl, function(base64Img){
        $('.output')
            .find('textarea')
                .val(base64Img)
                .end()
            .find('a')
                .attr('href', base64Img)
                .text(base64Img)
                .end()
            .find('img')
                .attr('src', base64Img);
    });
    
    event.preventDefault();
});

});//]]>  

</script>


</head>
<body>
  <h2>Input</h2>  
<form class="input-group" id="img2b64">
    <input 
        type="url" 
        name="url" 
        class="form-control"
        placeholder="Insert an IMAGE-URL" 
        value="http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png"  
        required>
    <span class="input-group-btn">
        <input 
            type="submit" 
            class="btn btn-default">
    </span>
</form>
            
<hr>
    
<h2>Output</h2>        
<div class="output">
    <textarea class="form-control"></textarea><br>
    <a></a><br><br>
    <img><br>
</div>


  
</body>


</html>