- 将以下代码复制封装于xxx.js文件中,放置在项目文件夹utiles下
// 把image对象 转换为 canvas对象
export function imgToCanvas (image) {
var canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
canvas.getContext('2d').drawImage(image, 0, 0)
return canvas
}
// canvas对象 转换为 image对象
export function canvasToImage(canvas) {
//新Image对象,可以理解为DOM
var image = new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL
// 指定格式PNG
image.src = canvas.toDataURL("image/png");
return image;
}
-
使用:引入xxx.js文件,调用方法
// 注意引入路径不要出错 import { imgToCanvas, canvasToImage } from '@/utils/xxx.js' let canvas = imgToCanvas(base64) let image = canvasToImage(base64)