最近在做一个上传头像然后保存显示的功能，因为涉及到裁剪大小和尺寸比例，所以直接上传图片再展示的话，就会出现问题，所以就想用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. awk 新手入门笔记

    转自:http://www.habadog.com/2011/05/22/awk-freshman-handbook/ awk新手入门笔记 @作者 : habadog@邮箱 : habadog1203 ...

  2. 【css】最近使用的两种图标字体库

    ## 0. 前言 比较基础的图标加载:<img src="x.png">和块元素的背景background: url(./x.png). 页面多图标时,使用雪碧图(多个 ...

  3. [nodejs]在mac环境下如何将node更新至最新?

    在mac下安装angular-cli时,报出较多错误.初步怀疑是因为node环境版本过低导致. 在mac下,需要执行如下几步将node更新至最新版本,也可以更新到指定版本 1. sudo npm ca ...

  4. css 字体单位之间的区分以及字体响应式实现

    问题场景: 在实现响应式布局的过程中,如何设置字体大小在不同的视窗尺寸以及不同的移动设备的可读性? 需要了解的有: 1.px,em,pt之间的换算关系 1em = 16px 1px  = 1/16 e ...

  5. cogs——66. [HAOI2004模拟] 数列问题

    66. [HAOI2004模拟] 数列问题 本以为会TLE,可... dfs水题(很基础) #include<bits/stdc++.h> using namespace std; ],a ...

  6. 洛谷——P2342 叠积木

    P2342 叠积木   题目大意:   给你一堆积木,排成一行,初始时每对积木都只有一个,支持两种操作  第一种是移动操作,格式为“移动X到Y的上面”.X和Y代表两块积木的编号,意思是将X所的那堆积 ...

  7. Django - 日志工作中常用配置

    工作中常用配置 # 日志配置 BASE_LOG_DIR = os.path.join(BASE_DIR, "log") LOGGING = { 'version': 1, # 保留 ...

  8. Git 基础教程 之 多人协作

           多人协作时,从远程克隆时,默认情况下,只能看到master分支 git checkout -b dev origin/dev 创建远程origin的dev分支到本地 git branch ...

  9. [置顶] Java基础学习总结（34）——HTTP协议详解

    一.什么是HTTP协议 HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的 ...

  10. [TS-A1488][2013中国国家集训队第二次作业]魔法波[高斯消元]

    暴力直接解异或方程组,O(n^6)无法接受,那么我们考虑把格子分块,横着和竖着分别分为互不影响的块,这样因为障碍物最多不超过200个,那么块的个数最多为2*(800+200)=2000个,最后用bit ...