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

本地与在线图片转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>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101206.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • uat环境停不了数据库「建议收藏」

    uat环境停不了数据库「建议收藏」uat环境使用shutdownimmediate关闭数据库时,无响应,于是查alert日志,看到如下错误:bash-3.2$tail-200falert_UAT.logSunJul1422:14:18201…

  • 【笔记】MAML-模型无关元学习算法「建议收藏」

    【笔记】MAML-模型无关元学习算法「建议收藏」[TOC]论文信息:FinnC,AbbeelP,LevineS.Modelagnosticmetalearningforfastadaptationofdeepnet

  • 什么是代理服务器(Proxy)

    什么是代理服务器(Proxy)以类似代理人的身份去取得用户所需要的数据就是了!但是由于它的『代理』能力,使得我们可以透过代理服务器来达成防火墙功能与用户浏览数据的分析! 此外,也可以藉由代理服务器来达成节省带宽的目的,以及加快内部网络对因特网的WWW访问速度  17.1.1什么是代理服务器 我们或许会帮忙家人去办理一些杂务吧!举个例子来说,例如缴费或者是申办提款卡等等的,由于你并不是『

  • 什么是pisa测试_从PISA测试看中国四省市学生:成绩遥遥领先之外,这些特质令人意外…

    什么是pisa测试_从PISA测试看中国四省市学生:成绩遥遥领先之外,这些特质令人意外…印象中PISA测试就是证明中国学生是王者的时刻。最新的这次也不例外。但除了考试分数高,中国学生还有哪些特质?——我是无所不能的分割线———先来了解下什么是PISA:PISA全名“国际学生评估项目”(theProgrammeforInternationalStudentAssessment),由国际经合组织(OECD)举办,每三年一次,针对全世界多个国家和地区(包括但不…

  • 从头开始学MySQL——-存储过程与存储函数(1)

    从头开始学MySQL——-存储过程与存储函数(1)10.1.1创建存储过程存储过程就是一条或者多条SQL语句的集合,可以视为批文件。它可以定义批量插入的语句,也可以定义一个接收不同条件的SQL。创建存储过程的语句为CREATEPROCEDURE,创建存储函数的语句为CREATEFUNCTION。调用存储过程的语句为CALL。调用存储函数的形式就像调用MyS……

  • java身份证识别_阿里java面试经验

    java身份证识别_阿里java面试经验前几天需要用到阿里的OCR接口,中间有踩坑,现在记录下来,已便使用一.BASE64OCR调用文档中需要传入BASE64,感谢Apache<dependency><groupId>commons-codec</groupId><artifactId>commons-codec</a…

    2022年10月19日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号