aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

点选

Browse Source
This commit is contained in:
李志鹏
2026-01-19 10:47:30 +08:00
parent 6b0d26ed6e
commit 43e3a79124
6 changed files with 138 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/component/Canvas/CanvasEditor/utils/helper.js
View File

@@ -995,13 +995,13 @@ export function getTransformScaleAngle(Transform) {
}
/**
* 图片转换为canvas
* base64转换为canvas
* @param {String} base64 - 图片base64编码
* @param {Number} scale - 缩放比例
* @param {Boolean} sr - 缩放反转，默认false
* @returns {Promise<HTMLCanvasElement>} canvas元素
*/
export async function base64ToCanvas(base64, scale = 1, sr = false) {
export function base64ToCanvas(base64, scale = 1, sr = false) {
return new Promise((resolve, reject) => {
const image = new Image();
image.src = base64;
@@ -1014,7 +1014,7 @@ export async function base64ToCanvas(base64, scale = 1, sr = false) {
const height = sr ? image.height / scale : image.height * scale;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
ctx.clearRect(0, 0, width, height);
ctx.drawImage(image, 0, 0, width, height);
resolve(canvas);
@@ -1022,6 +1022,25 @@ export async function base64ToCanvas(base64, scale = 1, sr = false) {
image.onerror = reject;
});
}
/**
* image转换为canvas
* @param {HTMLImageElement} image - 图片元素
* @param {Number} scale - 缩放比例
* @param {Boolean} sr - 缩放反转，默认false
* @returns {Promise<HTMLCanvasElement>} canvas元素
*/
export async function imageToCanvas(image, scale = 1, sr = false) {
await image.decode();
const canvas = document.createElement('canvas');
const width = (sr ? image.width / scale : image.width * scale);
const height = sr ? image.height / scale : image.height * scale;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d', { willReadFrequently: true });
ctx.clearRect(0, 0, width, height);
ctx.drawImage(image, 0, 0, width, height);
return resolve(canvas);
}
/**
* 图片边界跟踪算法(透明底)
@@ -1029,7 +1048,7 @@ export async function base64ToCanvas(base64, scale = 1, sr = false) {
* @returns {Array} 边界点数组 [{x, y}, ...]
*/
export function traceImageContour(canvas) {
const ctx = canvas.getContext("2d");
const ctx = canvas.getContext("2d", { willReadFrequently: true });
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
const width = canvas.width;
@@ -1124,7 +1143,7 @@ export function imageAddGapToCanvas(image, gapX, gapY) {
const tcanvas = document.createElement('canvas');
tcanvas.width = image.width + gapX;
tcanvas.height = image.height + gapY;
const ctx = tcanvas.getContext('2d');
const ctx = tcanvas.getContext('2d', { willReadFrequently: true });
ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
ctx.drawImage(image, 0, 0);
return tcanvas;