<!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. PAT 1004. Counting Leaves (30)

    A family hierarchy is usually presented by a pedigree tree.  Your job is to count those family membe ...

  2. IntelliJ IDEA 配置Jetty

    jetty是google app engine 在大量使用的一款服务器软件,不过当然目前还撼动不了tomcat的地位,但是jetty相当轻量级,可以自己灵活定制 资源占用少 ,所以还是有吸引力的,接下 ...

  3. 圣诞节来了，雪花纷飞的CSS3动画，还不首页用起来

    圣诞节来了,冬天来了,怎么可以没有雪花纷飞效果,昨天下班前折腾了一会儿,弄了个雪花纷飞的实例,有兴趣的可以交流分享下. 原文链接:http://www.html5think.com/article/i ...

  4. Session案例

    用户登入案例: 按一般的网站登入实例,用户在页面登入页输入账号.密码,验证通过后,在首页显示其"欢迎回来,xxx". 首先完成登入页login.html <!DOCTYPE ...

  5. 安卓开发中Theme.AppCompat.Light的解决方法

    styles.xml中<style name="AppBaseTheme" parent="Theme.AppCompat.Light">提示如下错 ...

  6. [Oracle] - 性能优化工具（1） - AWR

    AWR快照 默认情况下,Oracle每隔一小时会自己主动产生一个快照,保存近期8天的快照. 我们能够通过例如以下语句获得产生快照的时间间隔和保存的天数: SYS@orcl(lx15)> sele ...

  7. android关机充电

    1.关机充电其实是进入adb shell很快的方式! 2.手机关机时候插入USB,手机将进入关机充电模式,那么这个模式究竟是怎么进行的,这里分析如下! (1)uboot:这里代码大概浏览了一下:u-b ...

  8. 从零开始学android开发-创建第一个android项目

    打开ADT开发工具

  9. sed和awk最佳入门教程

    文档<sed和awk最佳入门教程>——摘自<实战linux shell编程与服务器管理>,简单易懂,适合初学者. 下载地址:http://download.csdn.net/d ...

  10. [转]将某个Qt4项目升级到Qt5遇到的问题

    原文:http://hi.baidu.com/xchinux/item/9044d8ce986accbb0d0a7b87晚上花了4个小时,将以前的一个项目从Qt 4.8.4-MinGW升级到了Qt5. ...