在线图片资源转换成Base64格式
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格式的更多相关文章
- JS 如何将“在线图片资源”转换成“base64”
在实现html2canvas截图的功能时,会报下面的错误: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEle ...
- data:image/png;base64 上传图像将图片转换成base64格式
大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...
- javascript-文件File转换成base64格式
不能直接访问用户计算机中的文件,一直都是Web应用开发中的一大障碍.2000年以前,处理文件的唯一方式就是在表单中加入<input type="file">字段,仅此而 ...
- java 图片转换成base64字符串
import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...
- 分别用Excel和python进行日期格式转换成时间戳格式
最近在处理一份驾驶行为方面的数据,其中要用到时间戳,因此就在此与大家一同分享学习一下. 1.什么是时间戳? 时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01 ...
- TXT电子书格式怎样转换成epub格式
怎样将TXT电子书格式转换成epub格式呢?因为很多时候不同的阅读器所支持的电子书格式是有所不同,所以电子书格式转换的问题,在生活中也是会经常出现的问题.如果我们需要将TXT电子书格式转换成epub格 ...
- Flv视频格式如何转换成MP4格式
如何将flv视频格式转换成MP4格式呢?随着现在视频格式的不断多样化,视频格式转换的问题也成了现在生活中常见的问题,那么我们应该怎样将flv视频格式转换成MP4格式呢?下面我们就一起来看一下吧. 操作 ...
- 如何将AAC音频转换成MP3格式
我们应该怎样将AAC音频转换成MP3格式呢?AAC是一种专为声音数据设计的文件压缩格式,相对于MP3音频来说更加高效,性价比跟高.但是因为MP3音频格式的通用性,我们还是时常需要将AAC音频转换成MP ...
- .net amr格式文件转换成mp3格式文件的方法
前言:winform端对于音频文件的格式多有限制,大多数不支持amr格式的文件的播放.但是,手机端传过来的音频文件大多数是amr格式的文件,所以,要想在winform客户端支持音频文件的播放,可以通过 ...
随机推荐
- 基于华为云IoT Studio自助生成10万行代码的奥秘
华为IoT小助手们搬好板凳.备好笔记本.听了HDC.Cloud的几场华为云技术架构师的直播讲课,感觉获益匪浅却又似懂非懂,直后悔自己没有好好打下基础.为了避免再次出现这样的情况,小助手偷偷跑去找了华为 ...
- c期末笔记(1)
运算符 1.i++与++i的细微区别 i++与++i 和i++放在一个语句中,则i原本的值先被利用.语句结束后,i的值加一. i的原始值失效,直接加一. 2.int加法 整形数据(int)加上任何类型 ...
- mongodb 指令
db.xxx.stats() 查看表的大小 db.xxx.remove({'endtime':{'$lte':ISODate('2018-10-01')}}) 删除小于等于固定时间的数据. db.us ...
- MySQL入门,第三部分,学会添加删除数据库
一.建立数据库 create database [if not exists] database_name [create_specification] 注意: 1.if not exists === ...
- 37 net 网络编程
InetAddress:此类表示互联网协议 (IP) 地址. Stringbuilder getHostAddress() 返回 IP 地址. Stringbuilder getHostName() ...
- 28.4 Calendar 日历
/* * Calendar:日历,提供了一些操作年月日时的方法 * 获取 * 修改 * 添加 */ public class CalendarDemo { public static void mai ...
- istream_iterator && istream_iteratorbuf
注意 读字符时, std::istream_iterator 默认跳过空白符(除非用 std::noskipws 或等价物禁用,而 std::istreambuf_iterator 不跳过.另外, s ...
- HBase协处理器加载的三种方式
本文主要给大家罗列了HBase协处理器加载的三种方式:Shell加载(动态).Api加载(动态).配置文件加载(静态).其中静态加载方式需要重启HBase. 我们假设我们已经有一个现成的需要加载的协处 ...
- Floyd-例题-实现-我的第一篇博客
https://www.cnblogs.com/lbssxz/p/11014911.html 这是网上看到的题目,以上是原博主的解答和题目来源(没找到别的题目来源) 题目大意: 城市交通费 [问题描述 ...
- 深入理解new运算符
在 JavaScript 中,new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例.创建一个对象很简单,为什么我们还要多此一举使用 new 运算符呢?它到底有什么样的魔力? 认 ...