文章目录
收到这个需求的时候，我的内心是崩溃的，脑子里已经跑过一万匹草泥马，内心想这种事为啥不交给ps去做，哪怕是手机里图片编辑也可以做到吧，专业的事交给专业的工具去干不就好了，何必出这种XX需求。后来想想就释然了，反正拿钱干活，干啥不是干，只要给钱，再XX的需求我也给你写出来。废话不多说，请看下方示例
实现效果：
本文案例只负责下图所示组件，上图中的图片列表只是为了方便展示
注：本组件使用的是React + AntD，这里样式就不过多描写了
思路一
首先，先说一开始错误的思路一，给图片添加文字信息，我一开始想到的是用canvas。先创建画布，获取要写入文字的图片宽高->再创建一个新的图片->然后再画布中画出刚才创建的新的图片->输入框文字发生改变则，获取输入框中输入的文字相关信息->在画布中绘制文字->生成新的图片渲染到页面。
但是最后该思路以失败告终，这条思路只适用于只添加一条文字信息的情况，添加第二条后就会出现添加的文字错乱的情况，因为新增代码后我无法保存上条图片的情况，无法知道上条图片的文字新增后的状态，如果是要删除情况又当如何，失败代码如下，如果只添加一条文字信息，可以用来参考，各位慢慢研究
import React from 'react'
import { Button } from 'antd'
import ParamsOptionComp from './ParamsOptionComp'
export default class MaterialEdit extends React.Component {
canvas = document.createElement("canvas");
image = React.createRef();
state = {
imgSrc: this.props.src,
paramAttribute: [{
content: '文字内容',
color: '#000000',
size: 24,
left: 130,
top: 50
}],
srcList: {
0: this.props.src
}
}
componentDidMount() {
this.setState({
paramAttribute: [{
content: '文字内容',
color: '#000000',
size: 24,
left: (this.image.current.clientWidth / 2) - 48,
top: (this.image.current.clientHeight / 2) + 12
}]
}, () => {
this.drawImage()
})
this.drawImage()
}
// 绘制图片
drawImage = (params, index) => {
// 创建画布
const ctx = this.canvas.getContext("2d");
// 获取图片大小
const imageRect = this.image.current.getBoundingClientRect();
const { width, height } = imageRect;
this.canvas.width = width;
this.canvas.height = height;
// 创建图片
const image = new Image();
// if (index) {
// console.log(this.state.imgSrc, 123)
// image.src = this.state.imgSrc;
// } else {
image.src = this.props.src;
// }
image.onload = () => {
ctx.drawImage(image, 0, 0, width, height);
// 绘制文字
this.drawText(params ? params : this.state.paramAttribute[0]);
}
}
// 绘制文字
drawText = ({ content, color, size, left, top }) => {
// console.log(content, color, size, left, top)
const ctx = this.canvas.getContext("2d");
ctx.font = `${size}px Arial`;
ctx.fillStyle = color;
ctx.fillText(content, left, top);
this.saveImage()
};
// 当文字发生变化
onValuesChange = (changedValues, allValues) => {
// console.log(changedValues, allValues);
allValues.paramAttribute.forEach((item, index) => {
// if (item && Object.keys(item).length > 0) {
this.drawImage(item)
// } else if (index >= 1) {
// this.drawImage(item, 'index')
// }
})
}
setSrcList = (index) => {
console.log(index)
}
// 保存图片
saveImage = () => {
const image = this.canvas.toDataURL('image/png');
// console.log(image);
this.setState({ imgSrc: image });
// 根据需要，将生成的图片显示给用户或保存为新的图片文件
// 如：window.open(image);
};
// 将图片转成二进制格式
base64ToBlob = (code) => {
let parts = code.split(';base64,')
let contentType = parts[0].split(':')[1]
let raw = window.atob(parts[1])
let rawLength = raw.length
let uint8Array = new Uint8Array(rawLength)
for (let i = 0; i < rawLength; i++) {
uint8Array[i] = raw.charCodeAt(i)
}
return new Blob([uint8Array], { type: contentType })
}
// 下载图片
download = (dataUrl, fileName) => {
let aLink = document.createElement('a')
let blob = this.base64ToBlob(dataUrl)
let event = document.createEvent('HTMLEvents')
event.initEvent('click', true, true)
aLink.download = fileName + '.' + blob.type.split('/')[1]
aLink.href = URL.createObjectURL(blob)
aLink.click()
}
render() {
const { imgSrc } = this.state
const { src } = this.props
return <>
<div style={{ textAlign: 'center', marginBottom: '30px' }}>
<img src={imgSrc} width={300} ref={this.image} />
</div>
<ParamsOptionComp onValuesChange={this.onValuesChange} paramAttribute={this.state.paramAttribute} setSrcList={this.setSrcList}/>
<Button type="primary" htmlType="submit">
生成新的图片
</Button>
</>
}
}
思路二
同样也是与canvas相关，不过这次想到的是，将输入的文字信息生成节点添加到页面中的某个模块，然后再将这个模块输出成canvas然后再转化成图片下载下来，这里会用到html2canvas这个库，这个库可以让html页面和canvas相互转换,大致思路如下：
下载html2canvas依赖包->搭建页面,并创建新增节点的区域->初始化新增第一个节点到页面中的某个指定模块->当文本框发生变动，修改节点信息->实现节点删除->利用html2canvas将模块生成canvas，然后转化成图片
1. 下载html2canvas依赖包
npm i html2canvas
2. 搭建页面,并且创建新增节点的区域
MaterialEditComp.jsx
import React, { useEffect, useRef, useState } from 'react'
import { Button } from 'antd'
import ParamsOptionComp from './ParamsOptionComp'
import html2canvas from 'html2canvas';
import './index.less'
export default function MaterialEditComp(props) {
const { src, getNewImage } = props;
const [imgSrc, setImgSrc] = React.useState(src);
const contentRef = useRef(null);
const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
const onValuesChange = (changedValues, allValues) => {}
// 新增节点
const AddNode = ({content, color, size, left, top }, index) => {}
// 删除节点
const removeNode = (index) => {}
// 将图片转换成二进制形式
const base64ToBlob = (code) => {}
// 保存图片
const saveImage = async () => {}
useEffect(() => {
// 坑一
const img = new Image();
img.src = imgSrc
img.onload = () => {
setImageSize({ width: img.width, height: img.height });
};
}, []);
return (
<>
// 新增节点区域
<div ref={contentRef} style={{
background: `url(${imgSrc}) no-repeat`,
backgroundSize: 'cover',
backgroundPosition: 'center',
width: imageSize.width + 'px',
height: imageSize.height + 'px',
marginBottom: '30px'
}} className="content">
</div>
// 输入框组件
<ParamsOptionComp onValuesChange={onValuesChange} imageSize={imageSize} removeNode={removeNode} />
<Button type="primary" htmlType="submit" onClick={saveImage} className='btn'>
生成新的图片
</Button>
</>
)
}
ParamsOptionComp.jsx
import React, { useEffect, useState } from 'react'
import { Input, Form, Space, Button, InputNumber } from 'antd'
import { PlusOutlined, MinusCircleOutlined, DragOutlined } from '@ant-design/icons'
export default function ParamsOptionComp(props) {
const { onValuesChange, imageSize, removeNode } = props
const [count, setCount] = useState(0)
const [form] = Form.useForm();
// 坑一
useEffect(() => {
form.resetFields()
}, [imageSize])
return <Form form={form} name="dynamic_form_nest_item"
// 坑一
initialValues={{
paramAttribute: [{
left: imageSize.width / 2 - 48,
top: imageSize.height / 2 - 24,
content: '文字内容'
}]
}}
onValuesChange={onValuesChange} >
<Form.List name="paramAttribute">
{(fields, { add, remove, move }) => (
<>
{fields.map(({ key, name, ...restField }, index) => (
<Space key={key} style={{ display: 'flex', marginBottom: 0 }} align="baseline">
<Form.Item
style={{ marginBottom: '10px' }}
{...restField}
name={[name, 'content']}
label="文字内容"
rules={[{ required: true, message: '请输入文字内容' }]}
>
<Input placeholder="文字内容" maxLength={50} />
</Form.Item>
<Form.Item
style={{ marginBottom: '10px' }}
{...restField}
name={[name, 'color']}
label="文字颜色"
rules={[{ required: true, message: '请输入文字颜色' }]}
initialValue="#000000"
>
<Input placeholder="文字颜色" type="color" style={{ width: '80px' }} />
</Form.Item>
<Form.Item
style={{ marginBottom: '10px' }}
{...restField}
name={[name, 'size']}
label="文字大小"
rules={[{ required: true, message: '请输入文字大小' }]}
initialValue="24"
>
<InputNumber placeholder="文字大小" min={12} value={13} />
</Form.Item>
<Form.Item
style={{ marginBottom: '10px' }}
{...restField}
name={[name, 'top']}
label="上边距"
rules={[{ required: true, message: '请输入上边距' }]}
initialValue={imageSize.height / 2 - 24}
>
<InputNumber placeholder="上边距" value={13} />
</Form.Item>
<Form.Item
style={{ marginBottom: '10px' }}
{...restField}
name={[name, 'left']}
label="左边距"
rules={[{ required: true, message: '请输入左边距' }]}
initialValue={imageSize.width / 2 - 48}
>
<InputNumber placeholder="左边距" value={13} />
</Form.Item>
<MinusCircleOutlined onClick={() => {
if (count === 0) {
return
}
remove(name)
removeNode(index)
setCount(count => count - 1);
}} />
</Space>
))}
<Form.Item>
<Button type="dashed" onClick={async () => {
try {
const values = await form.validateFields()
add();
setCount(count => count + 1);
} catch (errorInfo) {
return;
}
}} block icon={<PlusOutlined />}>添加选项</Button>
</Form.Item>
</>
)}
</Form.List>
</Form>
}
此时页面如下
上述代码中有个坑
-
坑
因为产品要求，需要给个初始化数据，并且文字要在图片内水平垂直居中。但是初始化数据时是无法获取到图片的宽高的，并且初始化时在useEffect中也无法通过ref获取图片的大小，此时只能将接收到的图片生成新的图片，然后读取新图片的宽高赋值给ImageSize，此时方可获取到图片真正的宽高,然后再传递给ParamsOptionComp组件
MaterialEditComp.jsx
const [imageSize, setImageSize] = useState({ width: 0, height: 0 }); useEffect(() => { const img = new Image(); img.src = imgSrc img.onload = () => { setImageSize({ width: img.width, height: img.height }); }; }, []); <ParamsOptionComp onValuesChange={onValuesChange} imageSize={imageSize} removeNode= {removeNode} />ParamsOptionComp.jsx
下方初始化第一条数据时，因为
initialValue就是所谓的defaultValue,只会在第一次赋值的时候改变，无法直接设置initialValue的值来改变，所以获取到的也是第一次初始化的宽高都为0，但是我们可以通过Form的resetFields()方法来解决这个问题，当监听到imageSize发生变化时我们可以调用resetFields()来重新设置initialValue的值。
useEffect(() => { form.resetFields() }, [imageSize])
3. 初始化新增第一个节点到页面中的某个指定模块
此时输入框中已经有值了，但是此处图片中还没有初始化值，此时，需要在useEffect中调用AddNode初始化第一个节点的值。
const AddNode = ({ content, color, size, left, top }, index) => {
const contentNode = contentRef.current;
let newNode = document.createElement('div');
newNode.className = 'node' + index;
// 此处判断节点是否已经存在
const bool = contentNode?.childNodes[index]
if (bool) {
newNode = contentNode.childNodes[index]
}
newNode.textContent = content
newNode.style.color = color;
newNode.style.fontSize = size + 'px';
newNode.style.top = top + 'px';
newNode.style.left = left + 'px';
newNode.style.position = 'absolute';
// 节点不存在新增阶段
if (!bool) {
contentNode.appendChild(newNode);
} else {
// 节点存在则替换原来的节点
contentNode.replaceChild(newNode, contentNode.childNodes[index])
}
}
useEffect(() => {
const img = new Image();
img.src = imgSrc
img.onload = () => {
setImageSize({ width: img.width, height: img.height });
AddNode({
content: '文字内容',
color: '#000000',
size: 24,
left: img.width / 2 - 48,
top: img.height / 2 - 24
}, 0);
};
}, []);
4. 当文本框发生变动，修改节点信息
当文本框发生变动通过表单的onValuesChange 进行监听，遍历表单中的数据新增节点信息
const onValuesChange = (changedValues, allValues) => {
// index标记当前是第几个节点
allValues.paramAttribute.forEach((item, index) => {
item && AddNode(item, index)
})
}
5. 实现节点删除
当进行节点删除时，调用传递给ParamsOptionComp组件的removeNode方法获取到删除的节点
// 删除节点
const removeNode = (index) => {
const contentNode = contentRef.current;
const bool = contentNode?.childNodes[index]
if (bool) {
contentNode.removeChild(contentNode.childNodes[index])
}
}
6. 利用html2canvas将模块生成canvas，然后转化成图片
此时需要利用html2canvas将模块生成canvas，然后转化成图片，如果需要调用接口将图片保存下来，此处还需将图片转换成二进制，如果不需要则直接下载就好
// 将图片转换成二进制形式
const base64ToBlob = (code) => {
let parts = code.split(';base64,')
let contentType = parts[0].split(':')[1]
let raw = window.atob(parts[1])
let rawLength = raw.length
let uint8Array = new Uint8Array(rawLength)
for (let i = 0; i < rawLength; i++) {
uint8Array[i] = raw.charCodeAt(i)
}
return new Blob([uint8Array], { type: contentType })
}
// 保存图片
const saveImage = async () => {
const contentNode = contentRef.current;
const canvas = await html2canvas(contentNode, {
useCORS: true,
allowTaint: true,//允许污染
backgroundColor: '#ffffff',
// toDataURL: src
})
const imgData = canvas.toDataURL('image/png');
let blob = base64ToBlob(imgData)
const link = document.createElement('a');
link.href = imgData;
// link.href = URL.createObjectURL(blob);
getNewImage(link.href)
// console.log(blob, 11)
link.download = 'page-image.' + blob.type.split('/')[1];
link.click();
}
注意：此处使用html2canvas时， 必须配置以下信息，否则图片信息无法进行转换
{
useCORS: true,
allowTaint: true,//允许污染
backgroundColor: '#ffffff',
// toDataURL: src
}
完整代码
MaterialEditComp.jsx
import React, { useEffect, useRef, useState } from 'react'
import { Button } from 'antd'
import ParamsOptionComp from './ParamsOptionComp'
import html2canvas from 'html2canvas';
import './index.less'
export default function MaterialEditComp(props) {
const { src, getNewImage } = props;
const [imgSrc, setImgSrc] = React.useState(src);
const contentRef = useRef(null);
const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
/*
const divStyle = {
background: `url(${imgSrc}) no-repeat`,
backgroundSize: 'cover',
backgroundPosition: 'center',
width: imageSize.width + 'px',
height: imageSize.height + 'px',
marginBottom: '30px'
}; */
const onValuesChange = (changedValues, allValues) => {
// console.log(changedValues, allValues, 11)
allValues.paramAttribute.forEach((item, index) => {
item && AddNode(item, index)
})
}
// 新增节点
const AddNode = ({ content, color, size, left, top }, index) => {
const contentNode = contentRef.current;
let newNode = document.createElement('div');
newNode.className = 'node' + index;
// 此处判断节点是否已经存在
const bool = contentNode?.childNodes[index]
if (bool) {
newNode = contentNode.childNodes[index]
}
newNode.textContent = content
newNode.style.color = color;
newNode.style.fontSize = size + 'px';
newNode.style.top = top + 'px';
newNode.style.left = left + 'px';
newNode.style.position = 'absolute';
// 节点不存在新增阶段
if (!bool) {
contentNode.appendChild(newNode);
} else {
// 节点存在则替换原来的节点
contentNode.replaceChild(newNode, contentNode.childNodes[index])
}
}
// 删除节点
const removeNode = (index) => {
const contentNode = contentRef.current;
const bool = contentNode?.childNodes[index]
if (bool) {
contentNode.removeChild(contentNode.childNodes[index])
}
}
// 将图片转换成二进制形式
const base64ToBlob = (code) => {
let parts = code.split(';base64,')
let contentType = parts[0].split(':')[1]
let raw = window.atob(parts[1])
let rawLength = raw.length
let uint8Array = new Uint8Array(rawLength)
for (let i = 0; i < rawLength; i++) {
uint8Array[i] = raw.charCodeAt(i)
}
return new Blob([uint8Array], { type: contentType })
}
// 保存图片
const saveImage = async () => {
const contentNode = contentRef.current;
const canvas = await html2canvas(contentNode, {
useCORS: true,
allowTaint: true,//允许污染
backgroundColor: '#ffffff',
// toDataURL: src
})
const imgData = canvas.toDataURL('image/png');
let blob = base64ToBlob(imgData)
const link = document.createElement('a');
link.href = imgData;
// link.href = URL.createObjectURL(blob);
getNewImage(link.href)
// console.log(blob, 11)
link.download = 'page-image.' + blob.type.split('/')[1];
link.click();
}
useEffect(() => {
const img = new Image();
img.src = imgSrc
img.onload = () => {
setImageSize({ width: img.width, height: img.height });
AddNode({
content: '文字内容',
color: '#000000',
size: 24,
left: img.width / 2 - 48,
top: img.height / 2 - 24
}, 0);
};
}, []);
return (
<>
<div ref={contentRef} style={{
background: `url(${imgSrc}) no-repeat`,
backgroundSize: 'cover',
backgroundPosition: 'center',
width: imageSize.width + 'px',
height: imageSize.height + 'px',
marginBottom: '30px'
}} className="content">
</div>
<ParamsOptionComp onValuesChange={onValuesChange} imageSize={imageSize} removeNode={removeNode} />
<Button type="primary" htmlType="submit" onClick={saveImage} className='btn'>
生成新的图片
</Button>
</>
)
}
ParamsOptionComp.jsx
import React, { useEffect, useState } from 'react'
import { Input, Form, Space, Button, InputNumber } from 'antd'
import { PlusOutlined, MinusCircleOutlined, DragOutlined } from '@ant-design/icons'
export default function ParamsOptionComp(props) {
const { onValuesChange, imageSize, removeNode } = props
const [count, setCount] = useState(0)
const [form] = Form.useForm();
// 坑
useEffect(() => {
form.resetFields()
}, [imageSize])
return <Form form={form} name="dynamic_form_nest_item"
// 坑
initialValues={{
paramAttribute: [{
left: imageSize.width / 2 - 48,
top: imageSize.height / 2 - 24,
content: '文字内容'
}]
}}
onValuesChange={onValuesChange} >
<Form.List name="paramAttribute">
{(fields, { add, remove, move }) => (
<>
{fields.map(({ key, name, ...restField }, index) => (
<Space key={key} style={{ display: 'flex', marginBottom: 0 }} align="baseline">
<Form.Item
style={{ marginBottom: '10px' }}
{...restField}
name={[name, 'content']}
label="文字内容"
rules={[{ required: true, message: '请输入文字内容' }]}
>
<Input placeholder="文字内容" maxLength={50} />
</Form.Item>
<Form.Item
style={{ marginBottom: '10px' }}
{...restField}
name={[name, 'color']}
label="文字颜色"
rules={[{ required: true, message: '请输入文字颜色' }]}
initialValue="#000000"
>
<Input placeholder="文字颜色" type="color" style={{ width: '80px' }} />
</Form.Item>
<Form.Item
style={{ marginBottom: '10px' }}
{...restField}
name={[name, 'size']}
label="文字大小"
rules={[{ required: true, message: '请输入文字大小' }]}
initialValue="24"
>
<InputNumber placeholder="文字大小" min={12} value={13} />
</Form.Item>
<Form.Item
style={{ marginBottom: '10px' }}
{...restField}
name={[name, 'top']}
label="上边距"
rules={[{ required: true, message: '请输入上边距' }]}
initialValue={imageSize.height / 2 - 24}
>
<InputNumber placeholder="上边距" value={13} />
</Form.Item>
<Form.Item
style={{ marginBottom: '10px' }}
{...restField}
name={[name, 'left']}
label="左边距"
rules={[{ required: true, message: '请输入左边距' }]}
initialValue={imageSize.width / 2 - 48}
>
<InputNumber placeholder="左边距" value={13} />
</Form.Item>
<MinusCircleOutlined onClick={() => {
if (count === 0) {
return
}
remove(name)
removeNode(index)
setCount(count => count - 1);
}} />
</Space>
))}
<Form.Item>
<Button type="dashed" onClick={async () => {
try {
const values = await form.validateFields()
add();
setCount(count => count + 1);
} catch (errorInfo) {
return;
}
}} block icon={<PlusOutlined />}>添加选项</Button>
</Form.Item>
</>
)}
</Form.List>
</Form>
}
使用：
const src=''
const getNewImage = (image) => {
console.log(image)
page.close()
}
return <MaterialEditComp src={src} getNewImage={getNewImage} />
1862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
