canvas与image互转, base64转图片

最新推荐文章于 2023-06-04 02:03:22 发布

weixin_34297704

最新推荐文章于 2023-06-04 02:03:22 发布

阅读量517

点赞数

文章标签： python c#

原文链接：https://my.oschina.net/xuqiang/blog/1036506

版权

2019独角兽企业重金招聘Python工程师标准>>>

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'});
};

转载于:https://my.oschina.net/xuqiang/blog/1036506