我们把图像文件的内容直接写在了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格式

    参考:http://blog.csdn.net/wyyfwm/article/details/45917255 我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求 ...

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

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

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

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

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

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

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

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

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

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

  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. P1186 玛丽卡 删边最短路最大值

    反正蛮水的一道题. 胡雨菲一句话让我的代码减少了10行还A了,之前的是个错的. 思路:先求出最短路,然后依次删去最短路上的每一条边,跑最短路求最大值. 关于删边:我的想法是当作链表删除,把last的n ...

  2. Linux:echo中,>和>>的区别(保存结果和追加结果)

    在Linux中,对于echo命令,保存文件时,">"和">>"是有区别的: 假如有A_R1,B_R2,C_R1三个字符 for i in `l ...

  3. 约会 音频mm教你追女孩

    微信吧地址发给他人. 美团提前选好环境然后提前打电话订购一个位置. 微博作用是为:更多的谈资.热搜 ,最近上榜的话题说. 打车软件: 地图: 2.外表: 下澡,指甲,胡子,发型,适合服装.发型和服装搭 ...

  4. MySQL5.5登录密码忘记了,怎嘛办?

    1.关闭正在运行的MySQL. 2.打开DOS窗口,转到mysql\bin目录. 3.输入mysqld --skip-grant-    tables回车.如果没有出现提示信息,那就对了. 4.再开一 ...

  5. Tomcat部署实战

    Tomcat部署实战 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.登录官网下载tomcat软件包(http://tomcat.apache.org/) 1>.在安装to ...

  6. jedis实现操纵redis的常用api及使用场景

    简单记录一下,和描述一下常用的业务场景.好记性不如烂笔头. pom.xml <!--整合redis--> <dependency> <groupId>redis.c ...

  7. JS基础:翻转数组

    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(arr); //操作原数组,让原数组第一位和最后一个位调换位置,以此类推. for (va ...

  8. synchronized实现原理

    线程安全是并发编程中的重要关注点,应该注意到的是,造成线程安全问题的主要诱因有两点,一是存在共享数据(也称临界资源),二是存在多条线程共同操作共享数据.因此为了解决这个问题,我们可能需要这样一个方案, ...

  9. centos7 卸载rpm安装的包

    1.查看已装包 rpm -qa | grep pgpool 2.卸载包 rpm -e 包名 3.示例(卸载pgpool) [root@VM_145_153_centos etc]# rpm -qa | ...

  10. windows上使用mkdocs搭建静态博客

    windows上使用mkdocs搭建静态博客 之前尝试过用HEXO搭建静态博客,最近发现有个叫mkdocs的开源项目也是搭建静态博客的好选择,而且它支持markdown格式,下面简要介绍一下mkdoc ...