文档章节

canvas与image互转, base64转图片

IT_小翼
 IT_小翼
发布于 2017/06/27 11:39
字数 135
阅读 757
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

  • 1、image转canvas
// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
	var canvas = document.createElement("canvas");
	canvas.width = image.width;
	canvas.height = image.height;
	canvas.getContext("2d").drawImage(image, 0, 0);
	return canvas;
}
  • 2、canvas转image
// Converts canvas to an image
function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	return image;
}
  • 3、将base64转成图片文件
export const convertBase64UrlToBlob = (urlData) => {
    const bytes = window.atob(urlData.split(',')[1]);        //去掉url的头,并转换为byte
    //处理异常,将ascii码小于0的转换为大于0
    const ab = new ArrayBuffer(bytes.length);
    let ia = new Uint8Array(ab);
    for (let i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    return new Blob( [ab] , {type : 'image/png'});
};

© 著作权归作者所有

IT_小翼

IT_小翼

粉丝 44
博文 153
码字总数 36364
作品 0
西安
程序员
私信 提问
浅入深出,原生API实现SVG 转 BASE64

令人发指的构建包 看了很多相关的技术文章,大多数用 html2canvas.js 和 canvas.js 第三方包实现,有些用了像 D3.js 这样更大型的构建包,而实际用到的功能,却只是其中 1% 都不足,简直就是...

白告June
03/22
0
0
DataURL, Blob, File, Image之间的关系与转换

使用前景: 移动端上传拍照图片太大,使用canvas压缩后base64=>blob二进制表单文件=>ajax-POST上传

xmqywx
2018/10/10
362
0
win10 uwp 读取保存WriteableBitmap 、BitmapImage

我们在UWP,经常使用的图片,数据结构就是 BitmapImage 和 WriteableBitmap。关于 BitmapImage 和 WriteableBitmap 区别,我就不在这里说。主要说的是 BitmapImage 和 WriteableBitmap 、二进...

lindexi_gd
2017/01/19
0
0
python PIL/cv2/base64相互转换

PIL和cv2是python中两个常用的图像处理库,PIL一般是anaconda自带的,cv2是opencv的python版本。base64在网络传输图片的时候经常用到。 ##PIL读取、保存图片方法 from PIL import Image img ...

xiaoxin
05/29
95
0
[前端][微信浏览器/canvas]长按二维码图片无法扫描问题的解决方法

最近开发H5,用户浏览的环境主要是在微信下。 H5的最后一页是用canvas的toDataUrl生成了一个base64的图片,然后放到img标签里放在最顶上,让用户可以长按图片保存和扫描二维码。 但是实际测试...

江湖游医黄半仙
2018/04/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何管stderr,而不是stdout?

我有一个要写入信息的程序stdout和stderr ,我需要grep通过什么是未来标准错误 ,而忽视标准输出 。 我当然可以分2步完成: command > /dev/null 2> temp.filegrep 'something' temp.file...

技术盛宴
23分钟前
4
0
centos7.5上通过docker安装并运行mysql5.7

1. docker pull mysql:5.7 2. docker run --name mysql5.7 -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7...

Ryub
26分钟前
5
0
什么是比赛条件?

在编写多线程应用程序时,遇到的最常见问题之一是竞争条件。 我对社区的问题是: 什么是比赛条件? 您如何检测到它们? 您如何处理它们? 最后,如何防止它们发生? #1楼 当设备或系统试图同...

javail
38分钟前
5
0
SpringMVC源码分析-DispatcherServlet-init方法分析

上一篇:SpringMVC源码分析-DispatcherServlet实例化干了些什么 先吐槽一下。。。写了两小时的博客突然被俺家小屁孩按了刷新,东西不见了,建议OSCHINA能够自动定时保存啊。让我先安静一下。...

特拉仔
45分钟前
6
0
python协程 生成器

协程,又称微线程,纤程。英文名Coroutine。 线程是系统级别的它们由操作系统调度,而协程则是程序级别的由程序根据需要自己调度。在一个线程中会有很多函数,我们把这些函数称为子程序,在子...

沙门行道
55分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部