前端js将图片image对象与canvas互相转换

1. 将以下代码复制封装于xxx.js文件中，放置在项目文件夹utiles下

// 把image对象 转换为 canvas对象
export function imgToCanvas (image) {var canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightcanvas.getContext('2d').drawImage(image, 0, 0)return canvas
}// canvas对象 转换为 image对象
export function canvasToImage(canvas) {//新Image对象，可以理解为DOMvar image = new Image();// canvas.toDataURL 返回的是一串Base64编码的URL// 指定格式PNGimage.src = canvas.toDataURL("image/png");return image;
}

2. 使用：引入xxx.js文件，调用方法

   // 注意引入路径不要出错
   import { imgToCanvas, canvasToImage } from '@/utils/xxx.js'let canvas = imgToCanvas(base64)
   let image = canvasToImage(base64)
   

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！