Js 将图片的绝对路径转换为base64编码
转。。。。
我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码;在这我们引用的是淘宝首页一张图片如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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 ext = img.src.substring(img.src.lastIndexOf( "." )+ 1 ).toLowerCase(); var dataURL = canvas.toDataURL( "image/" +ext); return dataURL; } var image = new Image(); image.src = img; image.onload = function(){ var base64 = getBase64Image(image); console.log(base64); } |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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 ext = img.src.substring(img.src.lastIndexOf( "." )+ 1 ).toLowerCase(); var dataURL = canvas.toDataURL( "image/" +ext); return dataURL; } var image = new Image(); image.src = img; image.onload = function(){ var base64 = getBase64Image(image); console.log(base64); } |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//var img = "http://127.0.0.1/base64/1.jpg"; 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 ext = img.src.substring(img.src.lastIndexOf( "." )+ 1 ).toLowerCase(); var dataURL = canvas.toDataURL( "image/" +ext); return dataURL; } var image = new Image(); image.crossOrigin = '' ; image.src = img; image.onload = function(){ var base64 = getBase64Image(image); console.log(base64); } |
Js 将图片的绝对路径转换为base64编码的更多相关文章
- Js 将图片的绝对路径转换为base64编码(3)
图片文件改变一方法:$('#file').change(function(){var oFReader = new FileReader();oFReader.readAsDataURL(this.f ...
- Js 将图片的绝对路径转换为base64编码(2)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Javascript 将图片的绝对路径转换为base64编码
Javascript将图片的绝对路径转换为base64编码 我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: var i ...
- JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传
主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...
- nodejs抓取网络图片转换为base64编码的图片
抓取网络图片需要加载http模块 //假定这是index.js文件 var http = require('http'); var url = 'http://p0.meituan.net/tuanp ...
- input file获取选择图片的本地路径和base64路径
input file获取选择图片的本地路径和base64路径 本地路径: myHeadFile: function (e) { // 这里是input file 的onchange事件 ] const ...
- 问题:C#将base64转换成二进制图片;结果:c# Base64编码和图片的互相转换代码
c# Base64编码和图片的互相转换代码 Base64编码在Web方面有很多应用,譬如在URL.电子邮件方面.网上有很多相关的资源用于提供Base64编码和其他编码的转换,.Net Framewor ...
- Qt 中十六进制字节流转换为Base64编码
在Qt中,在网络通信时,有时需要将16进制字节流转换为Base64编码传输,在Qt的QByteArray类中,提供了与Base64转换的接口: //16进制字节流转为Base64 QByteArray ...
- JAVA 将图片转换为Base64编码
这里使用的jar包是commons-codec-1.10.jar; 示例代码 import java.io.FileInputStream; import java.io.FileOutputStre ...
随机推荐
- 关于oracle下提示ORA-00904:Invalid identifier错误的问题
转自:https://blog.csdn.net/suleil1/article/details/49471549 今天在建表后对数据进行插入,遇到这个恶心人的ORA-00904:Invalid id ...
- JetBrain系列学生免费授权
1.访问网址:https://www.jetbrains.com/zh/student/ 2.往下滚动,点击立即申请 3.填写邮箱信息 4.确认后,跳转到Thank you页面,上面说已经给注册邮箱发 ...
- delete file SVN commit error has no URL
在提交SVN的时候遇到这个提交失败的提示: delete file SVN commit error has no URL 我的提交顺序是: 先在自己工程的文件夹删除 ->工程中删除 -> ...
- C#在非UI线程调用UI线程的控件
首先需要定义一个委托(delegate): private delegate void delegateSetProcessBarVal(int value); 然后定义一个方法来执行具体的操作: p ...
- java:easyui(重点示例)
1.accordion(可折叠的): <!doctype html> <html lang="zh"> <head> <title> ...
- 【HANA系列】【第五篇】SAP HANA XS的JavaScript API详解
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列][第五篇]SAP HANA XS ...
- ASP.NET Core 入门笔记 1,项目概览
(1)新建项目选择ASP.NET Core Web应用程序 (2)程序会自动安装相应的包组件,此时依赖项会有感叹号,等待安装完毕感叹号消失 (3)在项目的文件夹下建立其他文件,都会在项目资源视图中显示 ...
- android4.2 webkit 中的jni
在android 应用开发中使用WebView,当一个webveiw 被创建时, 也会去load 他所对应的动态库,这里动态库也就是传说中的webkit 内核等. C++ 层与java 层的交互也是通 ...
- EditText inputType类型整理
//文本类型,多为大写.小写和数字符号. android:inputType="none"//输入普通字符 android:inputType="text& ...
- SolidWorks学习笔记6抽壳,加强筋,扫描,放样
抽壳 概念:移除一个或者多个面,然后将其余的模型外表面向内或者向外偏移相等或者不等的距离 针对不同面设置不同厚度 方向参考 有实体的一侧是内测, 没有实体的一侧是外侧 顺序 先圆角再抽壳 加强筋. 点 ...