添加图片修改
This commit is contained in:
parent
d553d6b8a8
commit
863092b21b
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "whiteboard_lyc",
|
||||
"version": "0.1.3",
|
||||
"version": "0.1.7",
|
||||
"description": "一个简单的在线白板",
|
||||
"authors": [
|
||||
{
|
||||
|
|
|
|||
179
src/Export.js
179
src/Export.js
|
|
@ -50,14 +50,13 @@ export default class Export {
|
|||
}
|
||||
|
||||
// 导出为图片
|
||||
async exportImage({
|
||||
exportImage({
|
||||
type = 'image/png',
|
||||
renderBg = true,
|
||||
useBlob = false,
|
||||
paddingX = 10,
|
||||
paddingY = 10,
|
||||
onlySelected,
|
||||
backgroundColor
|
||||
onlySelected
|
||||
} = {}) {
|
||||
// 计算所有元素的外包围框
|
||||
let { minx, maxx, miny, maxy } = getMultiElementRectInfo(
|
||||
|
|
@ -65,11 +64,6 @@ export default class Export {
|
|||
)
|
||||
let width = maxx - minx + paddingX * 2
|
||||
let height = maxy - miny + paddingY * 2
|
||||
if(!width && !height){
|
||||
width = this.app.width
|
||||
height = this.app.height
|
||||
backgroundColor = '#ffffff'
|
||||
}
|
||||
// 创建导出canvas
|
||||
let { canvas, ctx } = createCanvas(width, height, {
|
||||
noStyle: true,
|
||||
|
|
@ -79,12 +73,12 @@ export default class Export {
|
|||
this.saveAppState()
|
||||
this.changeAppState(minx - paddingX, miny - paddingY, ctx)
|
||||
// 绘制背景颜色
|
||||
if (renderBg && backgroundColor ? backgroundColor : this.app.state.backgroundColor) {
|
||||
if (renderBg && this.app.state.backgroundColor) {
|
||||
this.app.background.canvasAddBackgroundColor(
|
||||
ctx,
|
||||
width,
|
||||
height,
|
||||
backgroundColor
|
||||
this.app.state.backgroundColor
|
||||
)
|
||||
}
|
||||
// 绘制元素到导出canvas
|
||||
|
|
@ -102,94 +96,89 @@ export default class Export {
|
|||
}, type)
|
||||
})
|
||||
} else {
|
||||
|
||||
return await this.compressImg(canvas.toDataURL(type), 1, 0.2,type)
|
||||
|
||||
return canvas.toDataURL(type)
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 压缩base64图片的函数
|
||||
*
|
||||
* @param {string} base64 - 图片的base64编码
|
||||
* @param {number} multiple - 缩放比例
|
||||
* @param {number} quality - 输出图片的质量（0.0到1.0之间）
|
||||
* @param {string} format - 输出图片的格式，默认为"image/webp" 可选参数 image/png、image/jpeg、image/webp 等
|
||||
* @param {number} min - 压缩后图片的最小KB大小
|
||||
* @param {number} max - 压缩后图片的最大KB大小
|
||||
* @returns {Promise<string>} - 返回压缩后的图片的base64编码
|
||||
*/
|
||||
|
||||
|
||||
compressImg(base64, multiple, quality, format = "image/webp", min, max) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
// 如果base64为空，则直接返回
|
||||
if (!base64) {
|
||||
return;
|
||||
}
|
||||
// 创建一个新的Image对象
|
||||
let newImage = new Image();
|
||||
// 设置Image对象的src为传入的base64编码
|
||||
newImage.src = base64;
|
||||
// 设置crossOrigin属性为'Anonymous'，用于处理跨域图片
|
||||
newImage.setAttribute('crossOrigin', 'Anonymous');
|
||||
|
||||
// 定义图片的宽度、高度和缩放比例
|
||||
let imgWidth, imgHeight, proportion;
|
||||
|
||||
// 当图片加载完成后执行的操作
|
||||
newImage.onload = function() {
|
||||
// 计算缩放后的宽度
|
||||
proportion = this.width * multiple;
|
||||
// 记录原始宽度和高度
|
||||
imgWidth = this.width;
|
||||
imgHeight = this.height;
|
||||
|
||||
// 创建一个canvas元素
|
||||
let canvas = document.createElement('canvas');
|
||||
// 获取canvas的2D渲染上下文
|
||||
let ctx = canvas.getContext('2d');
|
||||
|
||||
// 设置canvas的宽高，按照等比例缩放
|
||||
// 等比例缩小放大
|
||||
canvas.width = proportion;
|
||||
canvas.height = proportion * (imgHeight / imgWidth);
|
||||
|
||||
// 清除canvas上的内容
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// 在canvas上绘制缩放后的图片
|
||||
ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
// 将canvas转换为base64编码的图片
|
||||
let smallBase64 = canvas.toDataURL(format, quality);
|
||||
|
||||
// 如果设置了最小KB大小，并且压缩后的图片大小小于最小KB大小，则增加质量并重新压缩
|
||||
if (min && smallBase64.length / 1024 < min) {
|
||||
while (smallBase64.length / 1024 < min) {
|
||||
quality += 0.01;
|
||||
smallBase64 = canvas.toDataURL(format, quality);
|
||||
}
|
||||
}
|
||||
// 如果设置了最大KB大小，并且压缩后的图片大小大于最大KB大小，则减小质量并重新压缩
|
||||
else if (max && smallBase64.length / 1024 > max) {
|
||||
while (smallBase64.length / 1024 > max) {
|
||||
quality -= 0.01;
|
||||
smallBase64 = canvas.toDataURL(format, quality);
|
||||
}
|
||||
}
|
||||
|
||||
// 将压缩后的图片的base64编码作为Promise的解决值返回
|
||||
resolve(smallBase64);
|
||||
};
|
||||
} catch (error) {
|
||||
reject(error)
|
||||
throw new Error(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 压缩base64图片的函数
|
||||
*
|
||||
* @param {string} base64 - 图片的base64编码
|
||||
* @param {number} multiple - 缩放比例
|
||||
* @param {number} quality - 输出图片的质量（0.0到1.0之间）
|
||||
* @param {string} format - 输出图片的格式，默认为"image/webp" 可选参数 image/png、image/jpeg、image/webp 等
|
||||
* @param {number} min - 压缩后图片的最小KB大小
|
||||
* @param {number} max - 压缩后图片的最大KB大小
|
||||
* @returns {Promise<string>} - 返回压缩后的图片的base64编码
|
||||
*/
|
||||
|
||||
compressImg(base64, multiple, quality, format = 'image/webp', min, max) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
// 如果base64为空，则直接返回
|
||||
if (!base64) {
|
||||
return
|
||||
}
|
||||
// 创建一个新的Image对象
|
||||
let newImage = new Image()
|
||||
// 设置Image对象的src为传入的base64编码
|
||||
newImage.src = base64
|
||||
// 设置crossOrigin属性为'Anonymous'，用于处理跨域图片
|
||||
newImage.setAttribute('crossOrigin', 'Anonymous')
|
||||
|
||||
// 定义图片的宽度、高度和缩放比例
|
||||
let imgWidth, imgHeight, proportion
|
||||
|
||||
// 当图片加载完成后执行的操作
|
||||
newImage.onload = function () {
|
||||
// 计算缩放后的宽度
|
||||
proportion = this.width * multiple
|
||||
// 记录原始宽度和高度
|
||||
imgWidth = this.width
|
||||
imgHeight = this.height
|
||||
|
||||
// 创建一个canvas元素
|
||||
let canvas = document.createElement('canvas')
|
||||
// 获取canvas的2D渲染上下文
|
||||
let ctx = canvas.getContext('2d')
|
||||
|
||||
// 设置canvas的宽高，按照等比例缩放
|
||||
// 等比例缩小放大
|
||||
canvas.width = proportion
|
||||
canvas.height = proportion * (imgHeight / imgWidth)
|
||||
|
||||
// 清除canvas上的内容
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
// 在canvas上绘制缩放后的图片
|
||||
ctx.drawImage(this, 0, 0, canvas.width, canvas.height)
|
||||
|
||||
// 将canvas转换为base64编码的图片
|
||||
let smallBase64 = canvas.toDataURL(format, quality)
|
||||
|
||||
// 如果设置了最小KB大小，并且压缩后的图片大小小于最小KB大小，则增加质量并重新压缩
|
||||
if (min && smallBase64.length / 1024 < min) {
|
||||
while (smallBase64.length / 1024 < min) {
|
||||
quality += 0.01
|
||||
smallBase64 = canvas.toDataURL(format, quality)
|
||||
}
|
||||
}
|
||||
// 如果设置了最大KB大小，并且压缩后的图片大小大于最大KB大小，则减小质量并重新压缩
|
||||
else if (max && smallBase64.length / 1024 > max) {
|
||||
while (smallBase64.length / 1024 > max) {
|
||||
quality -= 0.01
|
||||
smallBase64 = canvas.toDataURL(format, quality)
|
||||
}
|
||||
}
|
||||
|
||||
// 将压缩后的图片的base64编码作为Promise的解决值返回
|
||||
resolve(smallBase64)
|
||||
}
|
||||
} catch (error) {
|
||||
reject(error)
|
||||
throw new Error(error)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 保存app类当前状态数据
|
||||
saveAppState() {
|
||||
|
|
|
|||
|
|
@ -71,17 +71,23 @@ export default class ImageEdit extends EventEmitter {
|
|||
img.onload = () => {
|
||||
let width = img.width
|
||||
let height = img.height
|
||||
// 图片过大，缩小宽高
|
||||
let ratio = img.width / img.height
|
||||
if (img.width > this.maxWidth || img.height > this.maxHeight) {
|
||||
if (ratio > this.maxRatio) {
|
||||
width = this.maxWidth
|
||||
height = this.maxWidth / ratio
|
||||
} else {
|
||||
height = this.maxHeight
|
||||
width = this.maxHeight * ratio
|
||||
}
|
||||
|
||||
let appWidth = this.app.width
|
||||
let appHeight = this.app.height
|
||||
if(width > appWidth && height > appHeight){
|
||||
let ratio = (appWidth / width) - 0.2
|
||||
console.log(ratio)
|
||||
this.app.setZoom(ratio)
|
||||
}
|
||||
if(height > appHeight && width <= appWidth){
|
||||
let ratio = (appHeight / height)
|
||||
this.app.setZoom(ratio)
|
||||
}
|
||||
if(width >= appWidth && height <= appHeight){
|
||||
let ratio = (appWidth / width) - 0.2
|
||||
this.app.setZoom(ratio)
|
||||
}
|
||||
let ratio = img.width / img.height
|
||||
resolve({
|
||||
imageObj: img,
|
||||
size: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue