<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<img src=""  class="img"/>

		<script>

			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("images/"+ext);

				return dataUrl;

			};

			var img="images/1.png";

			var image=new Image();

			image.src=img;

			image.onload=function(){

				var base64=getBase64Image(image);

				document.getElementsByClassName("img")[0].setAttribute("src",base64)

			}

		</script>

	</body>

</html>

　　

最终的效果：

js-图片img转base64格式的更多相关文章

  1. EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射（一） c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象

    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...

  2. data:image/png;base64 上传图像将图片转换成base64格式

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...

  3. canvas将图片转成base64格式 以及 验证图片是否透明

    logoImgUpload:function(file) { let self = this; self.formatUpload(file); let reader = new FileReader ...

  4. c# API接受图片文件以Base64格式上传图片

    /// base64上传图片 /// </summary> /// <returns>成功上传返回上传后的文件名</returns> [HttpPost] publ ...

  5. JS 图片转Base64

    JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决 ...

  6. base64格式的图片数据如何转成图片

    base64格式的图片数据如何转成图片 一.总结 一句话总结:不仅要去掉前面的格式串,还需要base64_decode()解码才行. // $base_img是获取到前端传递的值 $base_img ...

  7. C++读写图片数据转成Base64格式的一种方法

    最近在一个项目中要实现在客户端和服务端之间传送图片文件的功能,采用了C++语言读写图片转化成Base64格式进行传输.具体代码如下: //++Base64.h #pragma once class C ...

  8. laravel 存储base64格式图片

    laravel 存储base64格式图片 一.总结 一句话总结: 用正则替换base64图片编码的编码头即可 存储图片的话,用laravel可以用Storage的put方法,原生php可以用file_ ...

  9. php base64格式的图片字符串和图片文件相互转换的代码

    在移动端上传图片的时候通常会将图片转换成base64格式的字符串提交,所以此时需要使用服务器端的程序进行转换成二进制的数据.如下PHP代码实现了图片文件和base64格式的图片字符串相互转换的方法,同 ...

  10. Ckeditor 4 复制粘贴截图并转化base64格式保存至数据库

    虽然Ckeditor 中自带的有上传图片和文件的功能,但是有时候我们并不需要把图片保存至服务器的文件夹中. 反而是截图复制粘贴,把图片转化为base64格式保存在数据库中即可满足要求. 1.首先下载安 ...

随机推荐

  1. Java使用ResourceBundle类读取properties文件中文乱码的解决方案

    Java使用java.util.ResourceBundle类的方式来读取properties文件时不支持中文,要想支持中文必须将文件设置为ISO-8859-1编码格式,这对于开发工具默认为UTF-8 ...

  2. 学习路由器vue-router

    vue-router:vue官方路由管理器. 功能:嵌套的路由/视图表模块化的.基于组件的路由配置路由参数.查询.通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS ...

  3. PHP获取文件夹内所有文件包括子目录文件的名称或路径

    /* * new getFile($_dir[,$_emptyDir,$_fileType]); * @parma $_dir 是目录名称 * @parma $_emptyDir 是否获取空文件夹,选 ...

  4. python hashlib模块学习

    目录 hashlib 模块 破解密码 hmac 模块 hashlib 模块 1.干嘛用的: 对字符进行加密,其实就是一个自定义的字符编码表,我们原来接触的是计算机语言0和1然后转化成字符,而hashl ...

  5. Applied Nonparametric Statistics-lec3

    Ref: https://onlinecourses.science.psu.edu/stat464/print/book/export/html/4 使用非参数方法的优势: 1. 对总体分布做的假设 ...

  6. Java并发编程的艺术 记录（二）

    volatile的应用 volatile的定义如下:Java编程语言允许线程访问共享变量,为了确保共享变量能被准确和一致地更新,线程应该确保通过排他锁单独获得这个变量.Java语言提供了volatil ...

  7. eclipse使用技巧的网站收集——转载（一）

    Eclipse工具使用技巧总结(转载) 首先推荐一篇非常好的How to use eclipse文章 ,讲的是eclipse使用的方方面面,非常实用,推荐给大家! 一.常用快捷键:Ctrl+F11 运 ...

  8. 记一次虚拟机无法挂载volume的怪异问题排查

    故障现象 使用nova volume-attach <server> <volume>命令挂载卷,命令没有返回错误,但是查看虚拟机状态,卷并没有挂载上. 故障原因 疑似虚拟机长 ...

  9. android自动化测试之Monkey--从参数讲解、脚本制作到实战技巧

    视频: http://v.youku.com/v_show/id_XODcyMjM1MDA4.html?from=y1.2-1-87.4.4-1.1-1-2-3 PPT: http://www.doc ...

  10. luogu1736 创意吃鱼法

    好的题解使人一下就懂啊-- s1[i][j]表示(i,j)最多向左(或右)延伸多少个格子,使这些格子中的数都是0(不包括(i,j)) s2[i][j]表示(i,j)最多向上延伸多少个格子,使这些格子中 ...