cursor完美替代工具trae，继续白嫖与cursor一样的功能
本文主要介绍cursor 的替代编程工具 trae ,分别介绍了国内和国际两个版本，并使用国际版做了两个版本的图片加水印的小工具demo
·
背景
你的cursor 如果现在一直提示使用过多的免费账号，而一直没有解决，你可以考虑使用trae 这个工具。其功能与cursor一样，只不过细节没有cursor做的好。我这边将trae使用区域限制，给起了国际版和国内版两个版本。
国内版本
为啥叫国内版呢，因为国内版用不了像cursor 一样的模型，claude-3.5-sannet 和claude-3.7-sannet 这两个。
点击下载：国内版本下载
目前国内支持的模型如下图：
当然，如果像我一样喜欢claude-3.5-sannet 模型开发，且想尝试一下claude-3.7-sannet 这个新模型，你可以去下载国际版本的trae
国际版
国际版本是我取得名字。为啥叫国际版本呢，这个版本对中国不是很友好，在注册账号的时候，如果你的账号被检测出是中国的，那非常抱歉你就不能使用，页面提示应用程序不可用，如下图：
注意：这里不是真的应用程式不可以，而是不得账号不能在这个应用程序上使用。
当然，你如果有别的方式，不让他检测到你就可以继续使用。
点击下载：国际版本下载
如果你能绕过他们的账号检测，你就能看到跟我一样的界面
这里，你就可以使用跟cursor中一样的模型claude-3.5-sannet 。
不过如果你想通过trae 使用claude-3.7-sannet 新模型，这个就不是很友好。能不能立即使用这个就要看运气了，因为这个新模型现在使用的人很多，如果你要使用的话，运气不好，要排很长的队，就像我一样。如果等待时间长了，就会失败了。我在半夜都没有成功过。
下面是我尝试的截图：
我下载主要是想使用claude-3.5-sannet模型。
体验
好了，下面是我使用国际版的claude-3.5-sannet模型，不到一个半小时完成了两个版本的图片加水印的工具。
vue 版本：
纯Html版本
html 源码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片水印工具</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
min-height: 100vh;
}
.container {
max-width: 100%;
display: grid;
grid-template-columns: 300px 1fr;
gap: 30px;
background-color: #ffffff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
min-height: calc(100vh - 60px);
}
.control-panel {
background-color: #f8f9fa;
padding: 25px;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
position: sticky;
top: 30px;
height: fit-content;
max-height: calc(100vh - 60px);
overflow-y: auto;
}
.control-panel h2 {
margin: 0 0 20px 0;
color: #2c3e50;
font-size: 1.5rem;
}
.control-group {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}
.control-item {
margin-bottom: 15px;
}
.control-item:last-child {
margin-bottom: 0;
}
.control-item label {
display: block;
margin-bottom: 8px;
color: #2c3e50;
font-weight: 500;
font-size: 14px;
}
.control-item input[type="range"] {
width: 100%;
height: 8px;
background-color: #e9ecef;
border-radius: 4px;
outline: none;
-webkit-appearance: none;
margin: 10px 0;
}
.control-item input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 10px;
font-size: 14px;
transition: all 0.2s ease;
}
.control-item .value {
color: #666;
font-size: 14px;
font-weight: 500;
margin-left: 10px;
display: inline-block;
}
.preview-section {
position: relative;
border: 2px dashed #e0e0e0;
border-radius: 12px;
padding: 25px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 25px;
align-content: start;
background-color: #fafafa;
}
.preview-container {
background-color: #fff;
padding: 15px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.preview-container:hover {
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.preview-controls {
display: flex;
gap: 10px;
margin-top: 15px;
}
.control-group {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
transition: all 0.2s ease;
}
.control-group:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}
input[type="range"] {
width: 100%;
height: 8px;
background-color: #e9ecef;
border-radius: 4px;
outline: none;
-webkit-appearance: none;
margin: 10px 0;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background-color: #4CAF50;
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
}
input[type="range"]::-webkit-slider-thumb:hover {
background-color: #45a049;
transform: scale(1.1);
}
.upload-section {
margin-bottom: 25px;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}
input[type="file"] {
display: block;
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 2px dashed #ccc;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
input[type="file"]:hover {
border-color: #4CAF50;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(76, 175, 80, 0.2);
}
button:hover {
background-color: #45a049;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}
.value {
color: #666;
font-size: 14px;
font-weight: 500;
margin-left: 10px;
}
input[type="text"] {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 200px;
}
.preview-image {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
margin-bottom: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.watermark {
position: absolute;
top: var(--watermark-y);
left: var(--watermark-x);
transform: translate(-50%, -50%) rotate(var(--watermark-rotate));
font-size: var(--watermark-size);
opacity: var(--watermark-opacity);
color: rgba(0, 0, 0, 0.7);
pointer-events: none;
white-space: nowrap;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}
.preview-container {
position: relative;
overflow: hidden;
}
.preview-controls button {
flex: 1;
min-width: 80px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.control-group label {
display: block;
margin-bottom: 8px;
color: #2c3e50;
font-weight: 500;
font-size: 14px;
}
.control-group input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 10px;
font-size: 14px;
transition: all 0.2s ease;
}
.control-group input[type="text"]:focus {
border-color: #4CAF50;
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
outline: none;
}
</style>
</head>
<body>
<div class="container">
<div class="control-panel">
<h2>水印控制面板</h2>
<div class="upload-section">
<input type="file" id="imageInput" accept="image/*" multiple>
<button id="downloadAllBtn" onclick="downloadAllImages()">批量下载</button>
</div>
<div class="control-group">
<div class="control-item">
<label>水印文字</label>
<input type="text" id="watermarkText" placeholder="输入水印文字" value="示例水印">
<button onclick="updateWatermark()">更新水印</button>
</div>
<div class="control-item">
<label>字体大小</label>
<input type="range" id="sizeSlider" min="12" max="48" value="24">
<span class="value" id="sizeValue">24px</span>
</div>
<div class="control-item">
<label>透明度</label>
<input type="range" id="opacitySlider" min="0" max="100" value="50">
<span class="value" id="opacityValue">0.5</span>
</div>
<div class="control-item">
<label>水平位置</label>
<input type="range" id="xSlider" min="0" max="100" value="50">
<span class="value" id="xValue">50%</span>
</div>
<div class="control-item">
<label>垂直位置</label>
<input type="range" id="ySlider" min="0" max="100" value="50">
<span class="value" id="yValue">50%</span>
</div>
<div class="control-item">
<label>旋转角度</label>
<input type="range" id="rotateSlider" min="-180" max="180" value="-30">
<span class="value" id="rotateValue">-30°</span>
</div>
</div>
</div>
<div class="preview-section" id="previewSection">
</div>
</div>
<script>
const imageInput = document.getElementById('imageInput');
const previewSection = document.getElementById('previewSection');
const watermarkText = document.getElementById('watermarkText');
imageInput.addEventListener('change', function(e) {
const files = Array.from(e.target.files);
files.forEach((file, index) => {
const reader = new FileReader();
reader.onload = function(e) {
const container = document.createElement('div');
container.className = 'preview-container';
const img = document.createElement('img');
img.className = 'preview-image';
img.src = e.target.result;
const watermark = document.createElement('div');
watermark.className = 'watermark';
watermark.textContent = watermarkText.value;
const controls = document.createElement('div');
controls.className = 'preview-controls';
const downloadBtn = document.createElement('button');
downloadBtn.textContent = '下载';
downloadBtn.onclick = () => downloadImage(img, watermark);
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '删除';
deleteBtn.onclick = () => container.remove();
controls.appendChild(downloadBtn);
controls.appendChild(deleteBtn);
container.appendChild(img);
container.appendChild(watermark);
container.appendChild(controls);
previewSection.appendChild(container);
}
reader.readAsDataURL(file);
});
});
function updateWatermark() {
const watermarks = document.querySelectorAll('.watermark');
watermarks.forEach(watermark => {
watermark.textContent = watermarkText.value;
});
}
// 初始化所有滑动控制器
const sizeSlider = document.getElementById('sizeSlider');
const opacitySlider = document.getElementById('opacitySlider');
const xSlider = document.getElementById('xSlider');
const ySlider = document.getElementById('ySlider');
const rotateSlider = document.getElementById('rotateSlider');
const sizeValue = document.getElementById('sizeValue');
const opacityValue = document.getElementById('opacityValue');
const xValue = document.getElementById('xValue');
const yValue = document.getElementById('yValue');
const rotateValue = document.getElementById('rotateValue');
// 更新CSS变量的函数
function updateStyles() {
const root = document.documentElement;
root.style.setProperty('--watermark-size', `${sizeSlider.value}px`);
root.style.setProperty('--watermark-opacity', opacitySlider.value / 100);
root.style.setProperty('--watermark-x', `${xSlider.value}%`);
root.style.setProperty('--watermark-y', `${ySlider.value}%`);
root.style.setProperty('--watermark-rotate', `${rotateSlider.value}deg`);
// 更新显示的值
sizeValue.textContent = `${sizeSlider.value}px`;
opacityValue.textContent = (opacitySlider.value / 100).toFixed(2);
xValue.textContent = `${xSlider.value}%`;
yValue.textContent = `${ySlider.value}%`;
rotateValue.textContent = `${rotateSlider.value}°`;
}
// 为所有滑动控制器添加事件监听器
sizeSlider.addEventListener('input', updateStyles);
opacitySlider.addEventListener('input', updateStyles);
xSlider.addEventListener('input', updateStyles);
ySlider.addEventListener('input', updateStyles);
rotateSlider.addEventListener('input', updateStyles);
// 初始化样式
updateStyles();
// 初始化水印文字
updateWatermark();
// 下载单个图片
async function downloadImage(img, watermark) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置画布大小为图片大小
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
// 计算缩放比例
const scale = img.naturalWidth / img.offsetWidth;
// 绘制图片
ctx.drawImage(img, 0, 0);
// 应用水印样式
const fontSize = parseFloat(getComputedStyle(watermark).fontSize) * scale;
ctx.font = `${fontSize}px ${getComputedStyle(watermark).fontFamily}`;
ctx.fillStyle = getComputedStyle(watermark).color;
ctx.globalAlpha = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--watermark-opacity'));
// 保存当前上下文状态
ctx.save();
// 设置旋转中心点为图片中心
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
ctx.translate(centerX, centerY);
ctx.rotate(parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--watermark-rotate')) * Math.PI / 180);
// 绘制水印
const text = watermark.textContent;
const textMetrics = ctx.measureText(text);
const x = -textMetrics.width / 2;
const y = fontSize / 3; // 调整垂直位置以使文本居中
ctx.fillText(text, x, y);
// 恢复上下文状态
ctx.restore();
// 触发下载
const link = document.createElement('a');
link.download = 'watermarked-image.png';
link.href = canvas.toDataURL('image/png');
link.click();
}
// 批量下载所有图片
async function downloadAllImages() {
const zip = new JSZip();
const containers = document.querySelectorAll('.preview-container');
let index = 0;
for (const container of containers) {
const img = container.querySelector('.preview-image');
const watermark = container.querySelector('.watermark');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
// 计算缩放比例
const scale = img.naturalWidth / img.offsetWidth;
ctx.drawImage(img, 0, 0);
// 应用水印样式
const fontSize = parseFloat(getComputedStyle(watermark).fontSize) * scale;
ctx.font = `${fontSize}px ${getComputedStyle(watermark).fontFamily}`;
ctx.fillStyle = getComputedStyle(watermark).color;
ctx.globalAlpha = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--watermark-opacity'));
// 保存当前上下文状态
ctx.save();
// 设置旋转中心点为图片中心
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
ctx.translate(centerX, centerY);
ctx.rotate(parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--watermark-rotate')) * Math.PI / 180);
// 绘制水印
const text = watermark.textContent;
const textMetrics = ctx.measureText(text);
const x = -textMetrics.width / 2;
const y = fontSize / 3; // 调整垂直位置以使文本居中
ctx.fillText(text, x, y);
// 恢复上下文状态
ctx.restore();
const blob = await new Promise(resolve => canvas.toBlob(resolve));
zip.file(`watermarked-image-${++index}.png`, blob);
}
const content = await zip.generateAsync({type: 'blob'});
const link = document.createElement('a');
link.download = 'watermarked-images.zip';
link.href = URL.createObjectURL(content);
link.click();
}
</script>
</body>
</html>
汇聚全球AI编程工具，助力开发者即刻编程。
更多推荐
17
0- 0
已为社区贡献1条内容
所有评论(0)