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


相关推荐

  • navicat for mysql 15 激活码【2021.10最新】

    (navicat for mysql 15 激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • php源码审计_静态代码审计

    php源码审计_静态代码审计最近在学PHP代码审计,那就将学习的笔记都整理一遍吧~前期准备:1、安装相关软件,如Sublimetext、 Notepad++、editplus、 Seay源代码审计系统等2、获得源码,可以到网上下载各种网站源码3、安装网站审计方法:通读全文法:麻烦但全面敏感函数参数回溯法:高效常用,Seay源代码审计系统定向功能分析法:主要根据程序的业

  • sql游标的基本语法

    sql游标的基本语法DeclareSursorsCURSORforselectu.U_UserName,u.U_IDfromUsersu;–whereu.UserNamelike’%w%’;–打开游标openSursors;–提取数据–格式declare@useridvarchar(50)declare@usernamevarchar(50)fe

  • 示例的意思_实例

    示例的意思_实例JBoss 系列三十八:jBPM5示例之 Reusable Sub-Process

  • Android 浏览器分享到APP「建议收藏」

    Android 浏览器分享到APP「建议收藏」1.在配置文件添加权限&lt;uses-permissionandroid:name="com.android.launcher.permission.INSTALL_SHORTCUT"/&gt;2.在配置文件中给分享到APP的界面(Acticiy)添加intent-filter&lt;intent-filter&gt;&lt;actionandroid:name="android…

  • 同步锁-线程安全问题解决方案「建议收藏」

    同步锁-线程安全问题解决方案「建议收藏」1同步锁1.1前言经过前面多线程编程的学习,我们遇到了线程安全的相关问题,比如多线程售票情景下的超卖/重卖现象.上节笔记点这里-进程与线程笔记我们如何判断程序有没有可能出现线程安全问题,主要有以下三个条件:在多线程程序中+有共享数据+多条语句操作共享数据多线程的场景和共享数据的条件是改变不了的(就像4个窗口一起卖100张票,这个是业务)所以思路可以从第3点”多条语句操作共享数据”入手,既然是在这多条语句操作数据过程中出现了问题那我们可以把有可能出现问题的代码都包裹起来,一次只让一

发表回复

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

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