function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/png"); // 可选其他值 image/jpeg
return dataURL;
} function main(src, cb) {
var image = new Image();
image.src = src + '?v=' + Math.random(); // 处理缓存
image.crossOrigin = "*"; // 支持跨域图片
image.onload = function () {
var base64 = getBase64Image(image);
cb && cb(base64);
}
} main('http://192.168.0.204:8082/rest/v1/newdip/web/background/15.jpg', function (base64) {
// console.log(base64);
document.querySelector(".box").style.backgroundImage = `url(${base64})`;
});

原文地址:http://www.cnblogs.com/minigrasshopper/p/9042686.html

在线图片资源转换成Base64格式的更多相关文章

  1. JS 如何将“在线图片资源”转换成“base64”

    在实现html2canvas截图的功能时,会报下面的错误: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEle ...

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

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

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

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

  4. java 图片转换成base64字符串

    import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...

  5. 分别用Excel和python进行日期格式转换成时间戳格式

    最近在处理一份驾驶行为方面的数据,其中要用到时间戳,因此就在此与大家一同分享学习一下. 1.什么是时间戳? 时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01 ...

  6. TXT电子书格式怎样转换成epub格式

    怎样将TXT电子书格式转换成epub格式呢?因为很多时候不同的阅读器所支持的电子书格式是有所不同,所以电子书格式转换的问题,在生活中也是会经常出现的问题.如果我们需要将TXT电子书格式转换成epub格 ...

  7. Flv视频格式如何转换成MP4格式

    如何将flv视频格式转换成MP4格式呢?随着现在视频格式的不断多样化,视频格式转换的问题也成了现在生活中常见的问题,那么我们应该怎样将flv视频格式转换成MP4格式呢?下面我们就一起来看一下吧. 操作 ...

  8. 如何将AAC音频转换成MP3格式

    我们应该怎样将AAC音频转换成MP3格式呢?AAC是一种专为声音数据设计的文件压缩格式,相对于MP3音频来说更加高效,性价比跟高.但是因为MP3音频格式的通用性,我们还是时常需要将AAC音频转换成MP ...

  9. .net amr格式文件转换成mp3格式文件的方法

    前言:winform端对于音频文件的格式多有限制,大多数不支持amr格式的文件的播放.但是,手机端传过来的音频文件大多数是amr格式的文件,所以,要想在winform客户端支持音频文件的播放,可以通过 ...

随机推荐

  1. python函数的传参模式

    python里的变量更像是一个名字.标签.而Python中一切又皆为对象. 当函数传参时,函数参数作为一个标签,指向某个对象,因此更贴切的说是"call by object". 但 ...

  2. Redis设计与实现笔记 - hash

    基本结构如下 初始状态一直使用 dictht[0],即 0 号哈希表 在发生扩容 rehash的时候,开始渐进式向 dictht[1]哈希表转移, 转移完成后交换 dicth[0] 与 dictht[ ...

  3. 浅谈Java接口(Interface)

    浅谈Java接口 先不谈接口,不妨设想一个问题? 如果你写了个Animal类,有许多类继承了他,包括Hippo(河马), Dog, Wolf, Cat, Tiger这几个类.你把这几个类拿给别人用,但 ...

  4. Mysql主从搭建(1)

    Master上授权从库: ```grant replication slave on *.* to slave1@ip identified by 'password';``` 逻辑备份: ```my ...

  5. 浏览器判断兼容IE

    很多时候IE浏览器的兼容性问题总是让人很头疼,或许是样式的或许是脚本的.总之因为IE的低版本问题会引发各种各样的问题出来. function isUnderIE10() {//IE 6,7,8,9 i ...

  6. pgsql的使用

    Deepin上面pgsql的启动 service postgresql start 停止 service postgresql stop 查看pgsql的版本 psql --version

  7. Linux中vim编辑器 的 快捷键 --- 常用 的 都比较全

    Linux中vim编辑器的功能非常强大,许多常用快捷键用起来非常方便,这里将我学vim入门时学的一些常用的快捷键分享给大家一下,希望可以帮助你们. 这个是我将鸟哥书上的进行了一下整理的,希望不要涉及到 ...

  8. Thinking in Java,Fourth Edition(Java 编程思想,第四版)学习笔记(七)之Access Control

    Access control ( or implementation hiding) is about "not getting it right the first time." ...

  9. IOCP完成端口

    转:https://blog.csdn.net/piggyxp/article/details/6922277 本系列里完成端口的代码在两年前就已经写好了,但是由于许久没有写东西了,不知该如何提笔,所 ...

  10. div3--D - Distinct Characters Queries

    题目链接:https://codeforces.com/contest/1234/problem/D 题目大意: 对于给定的字符串,给出n个查询,查询时输入3个数啊,a,b,c,如果说a==1,则将位 ...