本地与在线图片转Base64及图片预览

查看效果: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>
时间: 2024-10-27 09:51:56

本地与在线图片转Base64及图片预览的相关文章

js的FileReader实现图片文件上传、预览

js的FileReader实现图片文件上传.预览 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料:而缺点便是,网页的大小可能会变大.它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使用.您的图像文件不能够超过浏览器限定的大小,否则无法读取图像文件.1

图片上传前的预览(PHP)

1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post" action="upload.php"><input type="file" name="file1" id="file1" /></form>2.试下效果: 判断文件类型:当用户选择了一

iOS UIPickerController 调用相机,选择图片上传,带预览功能

在.h中加入delegate @interface ViewController : UIViewController<UIActionSheetDelegate,UIImagePickerControllerDelegate,UINavigationControllerDelegate> //实现按钮事件 -(IBAction)chooseImage:(id)sender { UIActionSheet *sheet; <p> // 判断是否支持相机 </p> if(

iOS学习:调用相机,选择图片上传,带预览功能

一.新建工程 <ignore_js_op> 二.拖控件,创建映射 <ignore_js_op> 三.在.h中加入delegate @interface ViewController : UIViewController 复制代码 四.实现按钮事件 -(IBAction)chooseImage:(id)sender { UIActionSheet *sheet; // 判断是否支持相机 if([UIImagePickerController isSourceTypeAvailable

JavaScript 图片的上传前预览(兼容所有浏览器)

功能描述 通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点   ● 对于 Chrome.Firefox.IE10 使用 FileReader 来实现. ● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现. <!DOCTYPE html> <html> <head>

调用相机,选择图片上传,带预览功能、图片压缩、相机文字设置、

摘要 iOS调用相机,iOS调用相册,保存至应用程序沙盒,高保真压缩图片,并有点击放大预览,再次点击缩回至原大小,带动画效果,附源码下载地址. Xcode版本4.5.1 类库ios6.0 IOS调用相机 图片预览 图片上传 压缩图片 模拟器添加图片 目录[-] 判断是否支持相机,跳转到相机或相册界面 七.保存图片 高保真压缩图片方法 八.实现点击图片预览功能,滑动放大缩小,带动画 ps:模拟器添加图片 源码下载地址: 一.新建工程 二.拖控件,创建映射 三.在.h中加入delegate ? 1

js实现图片上传前的预览,实现完美兼容Firefox3,IE6,IE7,IE8和IE9的显示问题

1 <script type="text/javascript" language="javascript"> 2 function PreviewImg(imgFile){ 3 document.getElementById("idImg").style.display = "none";//隐藏初始化图片的显示,让过滤器显示 4 var newPreview=document.getElementById(&q

ASP.NET MVC图片管理(上传,预览与显示)

先看看效果(下面gif动画制作有点大,5.71MB): 题外话:上面选择图片来源于Insus.NET的新浪微博:http://weibo.com/104325017 也是昨晚(2015-07-03)Insus.NET烹饪的晚餐.如果你也想学习烹饪,也可以关注Insus.NET的微博. 言归正传,由于以前的asp.net mvc的练习文件上传文件,显示或是下载等博文,均是存储于站点目录之中.这次练习是把图片存储于数据库.也就是以图片的数据流存储.在上传时我们需要把文件处理为数据库,显示时,我们需要

基于HTML5和JSP实现的图片Ajax上传和预览

本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHttprequest Level2中对二进制文件上传的支持(通过构建FormData对象进行支持)以及Servlet 3.0支持的Multiconfig注解来支持文件的上传.在Servlet 3.0 规范之前通常使用第三方库如commons-fileupload进行解决文件上传. HTML5 中的 File 对