最近在做一个上传头像然后保存显示的功能，因为涉及到裁剪大小和尺寸比例，所以直接上传图片再展示的话，就会出现问题，所以就想用canvas来渲染裁剪后的图片，然后转化成base64格式的图片再存储，这样取用的时候也比较方便。

我写了一个demo来展示一下怎么把一张图片渲染成canvas图片，并转化为base64格式导出。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <canvas id='canvas'></canvas>

    <script src="~/Scripts/jquery-3.3.1.js"></script>

    <script>

        var canvas = document.getElementById('canvas');

        var context = canvas.getContext('2d');//返回一个用于在画布上绘图的环境，当前唯一的合法值是 "2d"，它指定了二维绘图，返回一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中

        var url = '/Content/images/demo.jpg';//图片URL

        var urlNumber = ;//要渲染的图片数

        var w = ;//canvas的宽

        var h = ;//canvas的高

        var img = new Image();

        img.crossOrigin = 'Anonymous';//解决Canvas.toDataURL 图片跨域问题

        img.src = url;

        //渲染方法

        var imgs = function () {

            context.drawImage(img, , , w, h);

            //导出

            var base64Img = canvas.toDataURL('image/jpg');

            console.log(base64Img);

        }

        img.onload = function () {

            urlNumber -= ;

            if (urlNumber === ) {

                imgs();

            }

        }

    </script>

</body>

</html>

运行程序，查看控制台记录的base64格式图片：

如果要传到后台，就以字符串的形式保存就好了；取用的时候也是直接取字符串。

/****************************我是可爱的分割线*************************************/

html中canvas渲染图片，并转化成base64格式保存的更多相关文章

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

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

  2. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

  3. [转]js 将图片连接转换称base64格式

    参考:http://blog.csdn.net/wyyfwm/article/details/45917255 我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求 ...

  4. C++读写图片数据转成Base64格式

    转载:http://www.cnblogs.com/jeray/p/8746976.html 转载:https://www.cnblogs.com/lujin49/p/4957742.html 转载: ...

  5. js 将图片连接转换称base64格式

    我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求.坏处呢,就是浏览器不会缓存这种图像.现在我们提供一个js: function convertImgToBase ...

  6. Nodejs如何把接收图片base64格式保存为文件存储到服务器上

    app.post('/upload', function(req, res){ //接收前台POST过来的base64 var imgData = req.body.imgData; //过滤data ...

  7. 将图片文件转成BASE64格式

    html5Reader (file, item) { const reader = new FileReader() reader.onload = (e) => { this.$set(ite ...

  8. Nodejs接收图片base64格式保存为文件

    base64的形式为“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0....”:当接收到上边的内容后,需要将data ...

  9. 神奇的canvas——巧用 canvas 为图片添加水印

    代码地址如下:http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没看 ...

随机推荐

  1. nexus3.x启动不起来

    1.首先说两种启动命令,网上最多的是用./nexus start.这种是后台启动,看不到实时日志:./nexus run 是实时启动可以看到日志. 2.linux下解压nexus-3.6.2-01-u ...

  2. 数据结构与算法(4) -- list、queue以及stack

    今天主要给大家介绍几种数据结构,这几种数据结构在实现原理上较为类似,我习惯称之为类list的容器.具体有list.stack以及queue. list的节点Node 首先介绍下node,也就是组成li ...

  3. 匈牙利算法求最大匹配（HDU-4185 Oil Skimming）

    如下图:要求最多可以凑成多少对对象 大佬博客: https://blog.csdn.net/cillyb/article/details/55511666 https://blog.csdn.net/ ...

  4. 关于预测io调用的思考

    什么是预测io 预测io是linux2.6版本内核调用默认的调用程序,对应用程序进行跟踪,统计应用程序使用io情况,在读操作返回之前先停顿6ms时间(linux默认时间),如果这期间有读操作过来,可以 ...

  5. 【Codeforces 474D】Flowers

    [链接] 我是链接,点我呀:) [题意] 让你吃东西 B食物一次必须要吃连续k个 但是对A食物没有要求 问你有多少种吃n个食物的方法(吃的序列) [题解] 设f[i]表示长度为i的吃的序列且符合要求的 ...

  6. 【codeforces 509A】Maximum in Table

    [题目链接]:http://codeforces.com/contest/509/problem/A [题意] 给你一个递推式f[i][j] = f[i-1][j]+f[i][j-1]; 让你求f[i ...

  7. LINUX 查看硬件配置命令

      系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # ...

  8. memcached集群

    借鉴:http://www.cnblogs.com/happyday56/p/3461113.html 首先说明下memcached存在如下问题 本身没有内置分布式功能,无法实现使用多台Memcach ...

  9. 修改 db_unique_name

    在创建DB的时候 db_unique_name设置错了.本来我是想让 db_name=itid db_unique_name=itid1 不过想改回来很简单的. SQL> alter syste ...

  10. SVN：通过命令行只提交目录，并忽略其中的文件

    通过SVN命令行,我们可以只提交项目的目录结构,从而绕开一开始就将我们不想要上传的文件给提交到服务器上.命令如下:svn add -N [directory] 之后可以进入此目录,执行以下命令:svn ...