<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />

    <script>

        function init() {

            var canvas = document.createElement('canvas')

            var ctx = canvas.getContext('2d');

            var img = new Image();

            img.src = "临时图片/1.png";

            img.onload = function() {

                //原图的大小

                ctx.drawImage(img, 0, 0, 100, 100);

                console.log(canvas.toDataURL())

                document.getElementById('imgbase64').src = canvas.toDataURL();

            }

        }

    </script>

</head>

<body onload="init()">

    <img id="imgbase64" src="" />

</body>

</html>

js 图片base64的更多相关文章

  1. js 图片base64转file文件的两种方式

    js 图片base64转file文件的两种方式 https://blog.csdn.net/yin13037173186/article/details/83302628 //将base64转换为bl ...

  2. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  3. JS实现图片base64转blob对象，压缩图片，预览图片，图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  4. js 图片与base64互相转换

    js将图片转化为base64 参考地址:http://www.cnblogs.com/mr-wuxiansheng/p/6931077.html var img = "imgurl" ...

  5. H5 Js图片转base64编码

    <!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. JS 图片转Base64

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

  7. JS图片转Base64

    网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的 ...

  8. 使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  9. 小程序获取图片base64编码

    项目中遇到了这个问题,在搜索过程中看到别人的博文,大多是下面这种方法,大致如下: let imgObj = { count: 1, success: (res) => { let tempFil ...

随机推荐

  1. Java多线程——Executors和线程池

    线程池的概念与Executors类的应用 1.创建固定大小的线程池 package java_thread; import java.util.concurrent.ExecutorService; ...

  2. KVM虚拟化技术

    KVM虚拟化技术 Qemu-kvm kvm virt-manager VNC Qemu-kvm创建和管理虚拟机 一.KVM简介 KVM(名称来自英语:Kernel-basedVirtual Machi ...

  3. Android 获取WIFI MAC地址的方法

    1. 经常用法,调用Android的API:WifiManager <uses-permission android:name="android.permission.ACCESS_W ...

  4. Ubuntu14.04搭建cocos2dx2.2.5开发环境（超级具体）

    一 下载解压 官方下载地址:http://www.cocos2d-x.org/download 下载下来之后解压完毕之后会得到一个文件夹cocos2d-x-2.2.5 二 编译 1 安装依赖 cd到c ...

  5. JAVA Metrics度量工具 - Metrics Core 翻译

    Metrics核心 翻译自Metrics官方文档: http://metrics.codahale.com/manual/core/ JAVA Metrics是一个用于度量的一个JAVA的类库,使用请 ...

  6. android账号与同步之同步实现

    上一篇博文我先介绍了账号与同步的账号管理,这篇就介绍一下还有一部分.就是android给提供的sync同步机制的使用. 事实上sync机制的使用和上一篇博文中介绍的账号管理非常类似,也是基于binde ...

  7. UVA10518 - How Many Calls?（矩阵高速幂）

    UVA10518 - How Many Calls?(矩阵高速幂) 题目链接 题目大意:给你fibonacci数列怎么求的.然后问你求f(n) = f(n - 1) + f(n - 2)须要多少次调用 ...

  8. mybatis11 sqlMapConfig.xml文件说明

    1sqlMapConfig.xml SqlMapConfig.xml中配置的内容和顺序如下: properties(属性) settings(全局配置参数) typeAliases(类型别名) typ ...

  9. PureMVC(JS版）源码解析（四）：Notifier类

         上一篇博客中,我们解析了Observer(观察者)类,这一篇博客我们来讲Notifier(通知着)类.关于Notifier类,源码注释上有这么一段: * @class puremvc.Not ...

  10. [学习笔记]设计模式之Prototype

    写在前面 为方便读者,本文已添加至索引: 设计模式 学习笔记索引 在笔记Builder模式中,我们曾见到了最初用于创建平行世界的函数createWorld,并且它是Mage类的成员函数(毕竟是专属于魔 ...