参考:http://blog.csdn.net/wyyfwm/article/details/45917255

我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处呢,就是浏览器不会缓存这种图像。现在我们提供一个js:

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/png');
        callback.call(this, dataURL);
        canvas = null;
    };
    img.src = url;
}

convertImgToBase64('http://bit.ly/18g0VNp', function(base64Img){
    // Base64DataURL
});

[转]js 将图片连接转换称base64格式的更多相关文章

  1. js 将图片连接转换称base64格式

    我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求.坏处呢,就是浏览器不会缓存这种图像.现在我们提供一个js: function convertImgToBase ...

  2. js 将图片文件转换成base64

      1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...

  3. js如何将选中图片文件转换成Base64字符串?

    如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传 ...

  4. 图片文件转换成Base64编码实现ajax提交图片

    //上传头像图片 function uploadHead(imgPath) { console.log("imgPath = " + imgPath); var image = n ...

  5. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

  6. C++读写图片数据转成Base64格式的一种方法

    最近在一个项目中要实现在客户端和服务端之间传送图片文件的功能,采用了C++语言读写图片转化成Base64格式进行传输.具体代码如下: //++Base64.h #pragma once class C ...

  7. data:image/png;base64 上传图像将图片转换成base64格式

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...

  8. javascript-文件File转换成base64格式

    不能直接访问用户计算机中的文件,一直都是Web应用开发中的一大障碍.2000年以前,处理文件的唯一方式就是在表单中加入<input type="file">字段,仅此而 ...

  9. C++读写图片数据转成Base64格式

    转载:http://www.cnblogs.com/jeray/p/8746976.html 转载:https://www.cnblogs.com/lujin49/p/4957742.html 转载: ...

随机推荐

  1. SVM(支持向量机)的一点理解

    最近有被问到SVM的问题,不懂装懂,羞愧不已.百度有很多深入浅出介绍SVM的文章,我就不赘述了,这里写一点自己肤浅的理解. SVM的核心思想是把求解低维空间上的高维分类器转化为求解高维函数空间上的线性 ...

  2. c# DES加密解密

    class DESHelper { string _iv = "9AUP"; string _key = "9d"; /// <summary> / ...

  3. <<< 判断提交方式是get还是post

    if("GET".equals(request.getMethod())){ System.out.println("提交方式是GET"); }else if( ...

  4. JAVA中获取当前系统时间及格式转换

    JAVA中获取当前系统时间   一. 获取当前系统时间和日期并格式化输出: import java.util.Date;import java.text.SimpleDateFormat; publi ...

  5. vim 支持C++11 lambda表达式

    http://www.vim.org/scripts/script.php?script_id=3797 Tar contains just the required .vim files, so u ...

  6. 常见input输入框 点击 发光白色外阴影 focus

    先看看具体实现的效果 第一就是点击input 实现的效果 默认谷歌点击input是蓝色边框 去掉用outline:0;  实现效果用focus  默认状态的边框颜色一般较重 如border:1px s ...

  7. oracle 11g express 快速入门

    创建表空间CREATE TABLESPACE testdb LOGGING DATAFILE 'F:\oracle\app\oracle\oradata\XE\testdb.dbf' SIZE 100 ...

  8. Js中文排序(拼音首字母)

    演示地址:http://lar5.sinaapp.com/ 1.index.html <html xmlns="http://www.w3.org/1999/xhtml"&g ...

  9. SQL Server基础知识

    1.SQL Server表名为什么要加方括号? 这个不是必须要加,但表名或字段名如果引用了sqlserver中的关键字,数据库会不识别这到底是关键字还是表名(或字段名)时就必须要加. 比如,一个表名叫 ...

  10. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...