查看效果：http://sandbox.runjs.cn/show/tgvbo9nq
本地图片转Base64（从而可以预览图片）：
function localImgLoad() { var src = this.files[0]; var self = $(this); var read = new FileReader(); read.onload = function(e) { var html = "<img src=" + e.target.result + " alt='' />"; self.parent().append(html); document.getElementById('localBase64StrContainer').value = e.target.result; } read.readAsDataURL(src) };
<div> 本地图片预览(本地图片转Base64)： <input type="file" onchange="localImgLoad.call(this)"/> <br/> <textarea id="localBase64StrContainer" cols=50 rows=6> </textarea> <br/> </div> <br/>
在线图片转Base64
function convertImgToBase64(url, callback, outputFormat) { var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), 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/jpg'); callback.call(this, dataURL); //alert(this); canvas = null; }; img.src = url; } function onlineButtonGetImg(imgUrl) { convertImgToBase64(imgUrl, function(base64Img) { document.getElementById('onlineBase64StrContainer').value = base64Img; $('#onlineBase64StrContainer').parent().append("<img src=" + base64Img + " />"); },'image/png') }
<div> 在线图片转base64： <br/> <br/> <input type="text" id="onlineUrl" size=30 value="http://sandbox.runjs.cn/uploads/rs/61/0dvnfbe3/081408127534068.png"/> <button onclick="onlineButtonGetImg(document.getElementById('onlineUrl').value)"> 转换 </button> <br/> <br/> <textarea id="onlineBase64StrContainer" cols=50 rows=6> </textarea> <br/> </div>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/101206.html原文链接：https://javaforall.net
