根据图片的路径（绝对路径/相对路径都可以），生成base64的
根据图片的路径（绝对路径/相对路径都可以），生成base64的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nick getBase64</title>
</head>
<body>
<div><img id="test" src="" alt=""/></div>
<script src="jquery.min.js"></script>
<script>
// var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
var imgSrc = "pic.jpg";
// var imgSrc = "img/1.jpg";
function getBase64(img){//传入图片路径，返回base64
function getBase64Image(img,width,height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
var canvas = document.createElement("canvas");
canvas.width = width ? width : img.width;
canvas.height = height ? height : img.height; var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL();
return dataURL;
}
var image = new Image();
image.crossOrigin = '';
image.src = img;
var deferred=$.Deferred();
if(img){
image.onload =function (){
deferred.resolve(getBase64Image(image));//将base64传给done上传处理
}
return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
}
}
getBase64(imgSrc)
.then(function(base64){
console.log(base64);
$("#test").attr("src",base64)
},function(err){
console.log(err);
});
</script>
</body>
</html>
根据图片的路径（绝对路径/相对路径都可以），生成base64的的更多相关文章
- php远程图片抓取存放到本地路径并生成缩略图
private function _getcontent($content) { $img_dir='../Public/Img/Ycimg'; //远程图片抓取存放 ...
- 关于富文本编辑器—UEditor（java版）的使用，以及如何将UEditor的文件/图片上传路径改成绝对路径
突然发现好久没写博客了,感觉变懒了,是要让自己养成经常写文章的习惯才行.既可以分享自己的所学,和所想,和大家一起讨论,发现自己的不足的问题. 大家可能经常会用到富文本编辑器,今天我要说的是UEdito ...
- 织梦dedecms5.7二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法
dedecms升级到5.7SP1后,开启二级域名,你会发现,在二级域名下的文章,上传的图片地址都是:二级域名+图片地址,这是相对路径.但是你的图片是默认上传在uploads里面的.应该使用绝对路径.这 ...
- webpack配置：图片处理、css分离和路径问题
一.CSS中的图片处理: 1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic" ...
- dedecms5.7二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法
dedecms5.7(织梦CMS5.7)二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法 dedecms升级到5.7SP1后,开启二级域名,你会发现,在二级域名下的文章,上传的图片地址都是: ...
- 配置vue项目将打包后图片文件的引用路径改为cdn路径?
vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...
- html中的图片、css、js等路径加载问题
网页文件的存取路径有3种:物理路径.绝对路径和相对路径. 物理路径就是你的文件放在主机上的具体位置,例如:D:\\image\\1.jpg 这种格式,该方法可以很快确定出你的文件,但是在网页显示路径基 ...
- iOS开发——路径篇&混编路径与全局宏路径
混编路径与全局宏路径 最近在做东西的时候有一个地方要用到一个第三方库的,但是目前swift版的还没有找到,自己又不想写(其实是不会写),所以就想到了混编,但是中间出现了好多问题,其中印象最深的就是桥接 ...
- Python主文件路径和当前模块路径
主执行文件路径sys.argv[0] ...
随机推荐
- [LeetCode] 74 Search a 2D Matrix（二分查找）
二分查找 1.二分查找的时间复杂度分析: 二分查找每次排除掉一半不合适的值,所以对于n个元素的情况来说: 一次二分剩下:n/2 两次:n/4 m次:n/(2^m) 最坏情况是排除到最后一个值之后得到结 ...
- Python资料汇总（建议收藏）
整理汇总,内容包括长期必备.入门教程.练手项目.学习视频. 一.长期必备. 1. StackOverflow,是疑难解答.bug排除必备网站,任何编程问题请第一时间到此网站查找. https://st ...
- HDU 3549 Flow Problem 网络流（最大流） FF EK
Flow Problem Time Limit: 5000/5000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Tot ...
- 微信小程序语音与讯飞语音识别接口（Java）
项目需求,需要使用讯飞的语音识别接口,将微信小程序上传的录音文件识别成文字返回 而微信小程序上传的文件格式是silk的,而讯飞接口能识别wav 格式的文件,所以需要将小程序上传的silk文件转成wav ...
- maven项目pom.xml配置文件依赖
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 【Android源码解析】View.post()到底干了啥
emmm,大伙都知道,子线程是不能进行 UI 操作的,或者很多场景下,一些操作需要延迟执行,这些都可以通过 Handler 来解决.但说实话,实在是太懒了,总感觉写 Handler 太麻烦了,一不小心 ...
- CSS中line-height与vertical-align
参考文章: 深入了解CSS的line-height属性 Vertical-Align: 你需要知道的所有事[译] Vertical-Align: All You Need To Know 1.什么是行 ...
- 一个模型中有两个外键指向同一张表时，创建迁移模型时报错：“ HINT: Add or change a related_name argument to the definition for 'AnswersModel.author' or 'AnswersModel.relay_to'.”解决方案
class AnswersModel(models.Model): author = models.ForeignKey(FrontUserModel,null=True,related_name=' ...
- Navicat for Mysql 暴力破解教程
关于破解Navicat for MySQL的教程有很多 ,但是比较繁琐, 这里推荐一种比较简单的办法~ 网盘地址:链接: https://pan.baidu.com/s/1kVHyShL 密码: ws ...
- 查看主机DNSserver
一.Nslookup(name server lookup)( 域名查询):是一个用于查询 Internet 域名信息或诊断DNS server问题的工具.nslookup能够指定查询的类型,能够查到 ...