Das Front-End-JS konvertiert das Bildobjekt und die Leinwand ineinander

1. Kopieren Sie den folgenden Code, kapseln Sie ihn in die Datei xxx.js und platzieren Sie ihn im Projektordner „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;
}

2. Verwendung: xxx.js-Datei importieren, Methode aufrufen

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