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. apache-atlas 深度剖析

    atlas  是apache下的大数据的元数据管理平台,支持对hive.storm.kafka.hbase.sqoop等进行元数据管理以及以图库的形式展示数据的血缘关系. 一.架构 整体架构实现如下图 ...

  2. Docker基础修炼2--Docker镜像原理及常用命令

    通过前文的讲解对Docker有了基本认识之后,我们开始进入实战操作,本文先演示Docker三要素之镜像原理和相关命令. 本文的演示环境仍然沿用上一篇文章在本地Centos7中安装的环境,如果你本地没有 ...

  3. Linux学习,ACL权限管理

    1.setfacl 得到指定文件的ACL权限 -m       表示后续有参数,不可与 -x参数配合使用 -x         删除后续的acl参数,不可与 -m 配合使用 -b        删除所 ...

  4. python3(三十五)file read write

    """ 文件读写 """ __author__on__ = 'shaozhiqi 2019/9/23' # !/usr/bin/env py ...

  5. Pandownload作者被抓之后

    近日,pandownload作者被抓,可以说是圈内的大事件,被抓之后, Pandownload 已经是打不开,用不了了 就在我为此感到惋惜的时候,竟然有出来个shengdownload 先来一块看看这 ...

  6. 给学妹的 Java 学习路线

    大家好,这篇文章主要是讲解下如何自学 Java,这个问题有很多粉丝私信问过,今天又有直系学妹问我如何学习 Java? 我就以我的经历,总结下分享给大家,有不当指出或者有更好的方法建议也欢迎留言指出,大 ...

  7. Thinking in Java,Fourth Edition(Java 编程思想,第四版)学习笔记(八)之Reusing Classes

    The trick is to use the classes without soiling the existing code. 1. composition--simply create obj ...

  8. Python 小技之实现的鲜花盛宴,你准备好了吗?

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:派森酱 PS:如有需要Python学习资料的小伙伴可以加点击下方链接 ...

  9. Vmware下安装Linux

    Linux系统 开源的操作系统.主要是应用在软件的服务器,性能比windows要好. Linux系统(ubuntu,centos,redhat,aix....) Linux主要是通过命令去操作计算机, ...

  10. . Number throry

    steve 学完了快速幂,现在会他快速的计算:(ij)%d , Alex 作为一个数学大师,给了 steve 一个问题:已知i∈[1,n],j∈[1,m] ,计算满足 (ij)%d=0 的 (i,j) ...