js把通过图片路径生成base64
主要思想:
使用canvas.toDataURL()方法将图片的绝对路径转换为base64编码.
一、图片在本地服务器:
var imgSrc = "img/1.jpg";//本地项目文件夹下的图片
function getBase64(img){//传入图片路径,返回base64
function getBase64Image(img,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.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);
},function(err){
console.log(err);
});
二、跨域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nick getBase64</title>
</head>
<body>
<div><img id="test" src="" alt=""/></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.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);
},function(err){
console.log(err);
});
</script>
</body>
</html>
最近做了一个项目用到了这个,
html代码生成canvas然后生成图片。但是html里面的图片路径必须用base64.所以就找了这个东西。
这个测试分享给大家:链接:http://pan.baidu.com/s/1gfGPhkf 密码:8e34
js把通过图片路径生成base64的更多相关文章
- 图片路径转base64字节码
package product; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOE ...
- Vue-cli构建项目, 组件中js代码引入图片路径问题
问题描述 .vue的组件分成三个部分, template结构部分, script路径代码, style页面样式 首先, 我们可以在template可以正确引入, 无论是dev, 还是build都没有问 ...
- JS将本地图片转化成base64码
在图片上传的时候,有时候后台需要前台上传base64文件,这时候我们就需要将图片资源转化成base64,下面这段js代码就可实现此功能. 1.首先在html里定义一个input输入框: BASE64图 ...
- 完整说明使用SpringBoot+js实现滑动图片验证
常见的网站验证方式有手机短信验证,图片字符验证,滑块验证,滑块图片验证.本文主要讲解的是滑块图片验证的实现流程.包括后台和前端的实现. 实现效果 使用的API java.awt.image.Buffe ...
- 根据图片的路径(绝对路径/相对路径都可以),生成base64的
根据图片的路径(绝对路径/相对路径都可以),生成base64的 <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- js 选择图片生成base64数据
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...
- Js 将图片的绝对路径转换为base64编码
转.... 我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: var img = "https://img. ...
- 减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)
在网站开发过程中,对于页面的加载效率一般都想尽办法求快.那么,怎么让才能更快呢?减少页面请求 是一个优化页面加载速度很好的方法.上一篇博文我们讲解了 “利用将小图标合成一张背景图来减少HTTP请求”, ...
- JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传
主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...
随机推荐
- python并发编程之多线程一
一,什么是线程 线程也被称为轻量进程计算机科学术语,指运行中的程序的调度单位. 线程是进程中的实体,一个进程可以拥有多个线程,一个线程必须有一个父进程.线程不拥有系统资源,只有运行必须的一些数据结构: ...
- ##3.Keystone 验证服务--openstack
##3.Keystone 验证服务 openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html #SQL上创建数据库并授权 #K ...
- Linux运维项目实战系列
Linux运维项目实战系列 项目实战1-LNMP的搭建.nginx的ssl加密.权限控制的实现 项目实战2-项目实战2-实现基于LVS负载均衡集群的电商网站架构 2.1项目实战2.1-nginx 反向 ...
- C#设计模式之十九状态模式(State Pattern)【行为型】
一.引言 今天我们开始讲"行为型"设计模式的第六个模式,该模式是[状态模式],英文名称是:State Pattern.无论是现实世界,还是面向对象的OO世界,里面都有一个东西, ...
- Solr6.1.0Windows安装步骤
一. 环境 solr 6.1.0 下载地址 http://archive.apache.org/dist/lucene/solr/6.1.0/ jdk 1.8 tomcat8 二. 安装solr到t ...
- c++简单编写线性表(实验)
哇 好久没更博客了 因为从上次更文到现在为止,我一直在学c#,然后也觉得没什么太大的东西想写在博客上, 总之这次就简单的传一下学校安排的数据结构的实验,我还是学生,是新手,希望能继续跟大家一起学习, ...
- 命令行保存指定目录文件的名字(可包含文件夹文字)到txt文本文件
Microsoft Visual Studio中配置OpenCV解决方案属性的时候, 需要将OpenCV的lib扩展名的库文件添加到属性的依赖列表里面,网上的有些人博客里面直接给出的会有问题(但大多数 ...
- Chrome development tools学习笔记(5)
调试JavaScript 随着如今JavaScript应用的越来越广泛,在面对前端工作的时候,开发人员须要强大的调试工具来高速有效地解决这个问题.我们文章的主角,Chrome DevTools就提供了 ...
- HDU-1828-Picture(线段树)
Problem Description A number of rectangular posters, photographs and other pictures of the same shap ...
- 牛腩新闻公布系统--学习Web的小技巧汇总
2014年11月10日,是个难忘的日子.这一天.小编的BS学习開始了.BS的开头,从牛腩新闻公布系统開始.之前学习的内容都是CS方面的知识,软考过后.開始学习BS,接触BS有几天的时间了,跟着牛腩老师 ...